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.4k

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

Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

1 year ago

955
Profile Card

Author:
Crimson

1 year ago

1.6k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

8 months ago

1.2k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

329
card
simple card for begin

Author:
Omer fils ELENGA

11 months ago

2.1k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

2 weeks ago

19
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

10 months ago

1.5k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

4k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

4 months ago

397
Responsive Features Section

Author:
ariaw

10 months ago

898
Card with sale ribbon

Author:
Fagundo67

3 years ago

11.9k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

195

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components