Home
Robert Chunga
E-commerce cards

E-commerce cards

E-commerce responsive cards with dark mode

This tailwind example is contributed by Robert Chunga, on 23-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Robert Chunga

2.3k

Fork Fullscreen

<div class="w-screen min-h-screen bg-gray-200 p-8 dark:bg-slate-800">
        <div class="w-fit mx-auto grid grid-cols-1 xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-6">
            
            <div class="w-72 bg-white shadow-lg duration-300 hover:scale-105">
                <div class="border-b-4 border-blue-800 relative group p-4">
                    <a href=""><img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxsZW5vdm98ZW58MHwwfHx8MTcxODkwNTA5NXww&ixlib=rb-4.0.3&q=80&w=1080" alt=""></a>
                    <div class="bg-blue-400  rounded-l-lg flex items-center justify-center absolute top-4 right-4">
                        <p class="text-xl text-white px-2">20% off</p>
                    </div>
                    <div class="absolute hidden my-4 p-2 text-sm text-white bg-blue-400 rounded-r-lg shadow-lg group-hover:block duration-300 bottom-0 mb- whitespace-nowrap">
                        <p>Click to view more details</p>
                    </div>
                </div>
                <div class="bg-blue-400 p-4">
                    <div class="text-xl capitalize font-semibold">
                        <h2>apple macbook pro</h2>
                    </div>
                    <div class="text-xl capitalize mt-4 mb-1.5">
                        <h3>specifications</h3>
                    </div>
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>processor</h3>
                        </div>
                        <div>
                            <p>Intel Core i7, 10th Gen</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU Cores</h3>
                        </div>
                        <div>
                            <p>8</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU speed</h3>
                        </div>
                        <div>
                            <p>2.4Ghz</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>memory</h3>
                        </div>
                        <div>
                            <p>16GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>storage</h3>
                        </div>
                        <div>
                            <p>500GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>operating system</h3>
                        </div>
                        <div>
                            <p>Mac OS</p>
                        </div>
                    </div>
                    
                     <div class="text-2xl font-bold mt-2">
                        <p>$1,250</p>
                     </div>
                     <div class="mt-4">
                        <button class="w-full bg-white capitalize font-medium p-2 rounded-lg opacity-90 hover:opacity-100">add to cart</button>
                     </div>
                </div>
            </div>
            
            
            <div class="w-72 bg-white shadow-lg duration-300 hover:scale-105">
                <div class="border-b-4 border-blue-800 relative group p-4">
                    <a href=""><img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxsZW5vdm98ZW58MHwwfHx8MTcxODkwNTA5NXww&ixlib=rb-4.0.3&q=80&w=1080" alt=""></a>
                    <div class="bg-blue-400  rounded-l-lg flex items-center justify-center absolute top-4 right-4">
                        <p class="text-xl text-white px-2">20% off</p>
                    </div>
                    <div class="absolute hidden my-4 p-2 text-sm text-white bg-blue-400 rounded-r-lg shadow-lg group-hover:block duration-300 bottom-0 mb- whitespace-nowrap">
                        <p>Click to view more details</p>
                    </div>
                </div>
                <div class="bg-blue-400 p-4">
                    <div class="text-xl capitalize font-semibold">
                        <h2>apple macbook pro</h2>
                    </div>
                    <div class="text-xl capitalize mt-4 mb-1.5">
                        <h3>specifications</h3>
                    </div>
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>processor</h3>
                        </div>
                        <div>
                            <p>Intel Core i7, 10th Gen</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU Cores</h3>
                        </div>
                        <div>
                            <p>8</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU speed</h3>
                        </div>
                        <div>
                            <p>2.4Ghz</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>memory</h3>
                        </div>
                        <div>
                            <p>16GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>storage</h3>
                        </div>
                        <div>
                            <p>500GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>operating system</h3>
                        </div>
                        <div>
                            <p>Mac OS</p>
                        </div>
                    </div>
                    
                     <div class="text-2xl font-bold mt-2">
                        <p>$1,250</p>
                     </div>
                     <div class="mt-4">
                        <button class="w-full bg-white capitalize font-medium p-2 rounded-lg opacity-90 hover:opacity-100">add to cart</button>
                     </div>
                </div>
            </div>
            
            
            <div class="w-72 bg-white shadow-lg duration-300 hover:scale-105">
                <div class="border-b-4 border-blue-800 relative group p-4">
                    <a href=""><img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxsZW5vdm98ZW58MHwwfHx8MTcxODkwNTA5NXww&ixlib=rb-4.0.3&q=80&w=1080" alt=""></a>
                    <div class="bg-blue-400  rounded-l-lg flex items-center justify-center absolute top-4 right-4">
                        <p class="text-xl text-white px-2">20% off</p>
                    </div>
                    <div class="absolute hidden my-4 p-2 text-sm text-white bg-blue-400 rounded-r-lg shadow-lg group-hover:block duration-300 bottom-0 mb- whitespace-nowrap">
                        <p>Click to view more details</p>
                    </div>
                </div>
                <div class="bg-blue-400 p-4">
                    <div class="text-xl capitalize font-semibold">
                        <h2>apple macbook pro</h2>
                    </div>
                    <div class="text-xl capitalize mt-4 mb-1.5">
                        <h3>specifications</h3>
                    </div>
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>processor</h3>
                        </div>
                        <div>
                            <p>Intel Core i7, 10th Gen</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU Cores</h3>
                        </div>
                        <div>
                            <p>8</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU speed</h3>
                        </div>
                        <div>
                            <p>2.4Ghz</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>memory</h3>
                        </div>
                        <div>
                            <p>16GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>storage</h3>
                        </div>
                        <div>
                            <p>500GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>operating system</h3>
                        </div>
                        <div>
                            <p>Mac OS</p>
                        </div>
                    </div>
                    
                     <div class="text-2xl font-bold mt-2">
                        <p>$1,250</p>
                     </div>
                     <div class="mt-4">
                        <button class="w-full bg-white capitalize font-medium p-2 rounded-lg opacity-90 hover:opacity-100">add to cart</button>
                     </div>
                </div>
            </div>
            
            
            <div class="w-72 bg-white shadow-lg duration-300 hover:scale-105">
                <div class="border-b-4 border-blue-800 relative group p-4">
                    <a href=""><img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxsZW5vdm98ZW58MHwwfHx8MTcxODkwNTA5NXww&ixlib=rb-4.0.3&q=80&w=1080" alt=""></a>
                    <div class="bg-blue-400  rounded-l-lg flex items-center justify-center absolute top-4 right-4">
                        <p class="text-xl text-white px-2">20% off</p>
                    </div>
                    <div class="absolute hidden my-4 p-2 text-sm text-white bg-blue-400 rounded-r-lg shadow-lg group-hover:block duration-300 bottom-0 mb- whitespace-nowrap">
                        <p>Click to view more details</p>
                    </div>
                </div>
                <div class="bg-blue-400 p-4">
                    <div class="text-xl capitalize font-semibold">
                        <h2>apple macbook pro</h2>
                    </div>
                    <div class="text-xl capitalize mt-4 mb-1.5">
                        <h3>specifications</h3>
                    </div>
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>processor</h3>
                        </div>
                        <div>
                            <p>Intel Core i7, 10th Gen</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU Cores</h3>
                        </div>
                        <div>
                            <p>8</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>CPU speed</h3>
                        </div>
                        <div>
                            <p>2.4Ghz</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>memory</h3>
                        </div>
                        <div>
                            <p>16GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>storage</h3>
                        </div>
                        <div>
                            <p>500GB</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex justify-between">
                        <div class="capitalize font-bold">
                            <h3>operating system</h3>
                        </div>
                        <div>
                            <p>Mac OS</p>
                        </div>
                    </div>
                    
                     <div class="text-2xl font-bold mt-2">
                        <p>$1,250</p>
                     </div>
                     <div class="mt-4">
                        <button class="w-full bg-white capitalize font-medium p-2 rounded-lg opacity-90 hover:opacity-100">add to cart</button>
                     </div>
                </div>
            </div>
            
        </div>
     </div>

Related Examples

Blog Card

Author:
Md. Tofayel islam

1 year ago

1.7k
Card with social media share buttons

Author:
Computer guy

2 years ago

9.1k
Shopping Cart -Card

Author:
ABDO-SY

9 months ago

1.5k
Card Slider

Author:
Maxim

9 months ago

1.5k
Product card

Author:
Oliver Hansen

2 years ago

13.8k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

2 years ago

7.4k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

11 months ago

1.2k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.8k
Info Card

Author:
Prem..

3 years ago

19.8k
Simple product card

Author:
farid

1 year ago

1.6k
card
Tarjeta descriptiva

Author:
Raul antonio de la cruz hernandez

1 month ago

105
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

5 months ago

908

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components