Home
Steven Kuhn
Product card for eCommerce website

Product card for eCommerce website

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

Card Product eCommerce

Author Steven Kuhn

11.4k

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.

Author:
JaxStone

2 years ago

45.5k
Product card

Author:
Simon Scheffer

2 years ago

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

Author:
Arya

2 years ago

39.8k
Tailwind product gallery

Author:
JaxStone

2 years ago

24.6k
Product card

Author:
Oliver Hansen

2 years ago

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

Author:
Noob

2 years ago

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

Author:
Noob

2 years ago

15.8k
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

Author:
threehymns

1 year ago

16.2k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

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

Author:
Code huit

1 year ago

12.2k
Product Card

Author:
Arya

2 years ago

10.2k
Product card

Author:
Oliver Hansen

2 years ago

8.9k
Product card
sleek and modern product card

Author:
OmKar Mehta

11 months ago

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

Author:
Shariar Hasan

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components