Product card

This tailwind example is contributed by Simon Scheffer, on 19-Dec-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Card Product

Author Simon Scheffer

Tailwind v3.4 32.5k 19

Fork Fullscreen

<div class="flex-col md:flex-row justify-between flex gap-4 items-start mx-4 py-12">
    <div class="flex bg-white rounded-lg shadow dark:bg-gray-800 flex-col md:flex-row">
        <div class="relative w-full md:w-48 flex justify-center items-center">
            <img src="https://cdn.pixabay.com/photo/2013/07/13/14/07/apparel-162180_960_720.png" alt="shopping image"
                class="object-cover w-full h-48 md:h-full rounded-t-lg md:rounded-l-lg md:rounded-t-none">
        </div>
        <form class="flex-auto p-6">
            <div class="flex flex-wrap">
                <h1 class="flex-auto text-xl font-semibold dark:text-gray-50">Product name</h1>
                <div class="text-xl font-semibold text-gray-500 dark:text-gray-300">$110.00</div>
                <div class="flex-none w-full mt-2 text-sm font-medium text-gray-500 dark:text-gray-300">In stock</div>
            </div>
            <div class="flex items-baseline mt-4 mb-6 text-gray-700 dark:text-gray-300">
                <div class="flex space-x-2">

<input type="radio"
                            class="flex items-center justify-center w-6 h-6 accent-violet-600 bg-gray-100 rounded-lg dark:bg-gray-600"
                            name="size" value="xs">XS
                    </label>
                    <label class="text-center">
                        <input type="radio" class="flex items-center justify-center w-6 h-6 accent-violet-600" name="size"
                            value="s">S
                    </label>
                    <label class="text-center">
                        <input type="radio" class="flex items-center justify-center w-6 h-6 accent-violet-600" name="size"
                            value="m">M
                    </label>
                    <label class="text-center">
                        <input type="radio" class="flex items-center justify-center w-6 h-6 accent-violet-600" name="size"
                            value="l">L
                    </label>
                    <label class="text-center">
                        <input type="radio" class="flex items-center justify-center w-6 h-6 accent-violet-600" name="size"
                            value="xl">XL
                    </label>
                </div>
                <a href="#"
                    class="hidden ml-auto text-sm text-gray-500 underline md:block dark:text-gray-300">Size
                    Guide
                </a>
            </div>
            <div class="flex mb-4 text-sm font-medium">
                <button type="button"
                    class="py-2 px-4 bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ">Buy
                    now</button>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-300">Free shipping on all continental US orders.</p>
        </form>
    </div>
</div>

Related Examples

Product page
Product Information Card component that provides comprehensive details about a product, including an image, name, description, price, availability, color and size options, and a product description.

JaxStone

3 years ago

49.4k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Tailwind product gallery

JaxStone

3 years ago

27.9k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Product card

Oliver Hansen

3 years ago

14.5k
Tailwind products list

Isabella Kowalski

3 years ago

14.7k
Product Page
Showcase for the product.

Prem..

4 years ago

34.8k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Oliver Hansen

3 years ago

10.8k
Card grid for posts

Mr Robot

3 years ago

24.2k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k
Tailwind image card with text above it

I.P. Leroy

3 years ago

26.5k
Info Card

Prem..

4 years ago

20.9k
Card
Card with Likes and download Button

Mrunal Solkar

3 years ago

11.2k
Image card

Laurits

3 years ago

18.3k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Coupon code card
Display Special Offer with Coupon Code

Dipti narayan

3 years ago

11.7k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.5k