Product card for eCommerce website

This tailwind example is contributed by Steven Kuhn, on 20-Sep-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product eCommerce

Author Steven Kuhn

Tailwind v3.4 13.3k 14

Fork Fullscreen

<div class="w-80 bg-white shadow rounded">
    <div class="h-48 w-full bg-gray-200 flex flex-col justify-between p-4 bg-cover bg-center"
        style="background-image: url('https://images.pexels.com/photos/7989741/pexels-photo-7989741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
        <div class="flex justify-between">
            <input type="checkbox" />
            <button class="text-white hover:text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </button>
        </div>
        <div>
            <span
                class="uppercase text-xs bg-green-50 p-0.5 border-green-500 border rounded text-green-700 font-medium select-none">
                available
            </span>
        </div>
    </div>
    <div class="p-4 flex flex-col items-center">
        <p class="text-gray-400 font-light text-xs text-center">Hammond robotics</p>
        <h1 class="text-gray-800 text-center mt-1">Item name</h1>
        <p class="text-center text-gray-800 mt-1">€1299</p>
        <div class="inline-flex items-center mt-2">
            <button
                class="bg-white rounded-l border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                </svg>
            </button>
            <div
                class="bg-gray-100 border-t border-b border-gray-100 text-gray-600 hover:bg-gray-100 inline-flex items-center px-4 py-1 select-none">
                2
            </div>
            <button
                class="bg-white rounded-r border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </button>
        </div>

<button
            class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 mt-4 w-full flex items-center justify-center">
            Add to order
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
        </button>
    </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.2k
Product card

Simon Scheffer

3 years ago

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

Arya

3 years ago

46.1k
Tailwind product gallery

JaxStone

3 years ago

27.8k
Product card

Oliver Hansen

3 years ago

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

Noob

3 years ago

24.8k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Noob

4 years ago

18.7k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

2 years ago

20.1k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Code huit

3 years ago

14.7k
Product Card

Arya

3 years ago

11.7k
Product card

Oliver Hansen

3 years ago

10.7k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k