Simple But Beautiful Product Card Design

Back Tailwind - v3.0 3 years ago 413 40

HTML

<div class="p-5 bg-gray-100 text-center">

        <!-- Card Design -->
        <div class="bg-white w-64 m-5 py-5 transition shadow hover:shadow-lg border">
            <img src="https://i.ibb.co/fQTGHg6/product-short-resolution-163-1632306571.png"
                class="w-full transition scale-[95%] hover:scale-100 delay-300" />
            <h2 class="pt-4">
                Samsung Gallaxy J10
            </h2>
            <p>
                <span class="text-yellow-500">$1,000</span>
            </p>
            <p class="mt-3">
                <button
                    class="bg-blue-600 text-white px-4 py-2 rounded-md transition-all hover:shadow-md scale-[95%] hover:scale-100">Add
                    to Cart</button>
            </p>
        </div>
        <!-- End Card Design -->

    </div>

Preview