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

pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

2 months ago

348
Card kpi Chart
Targetas kpi con graficas

Author:
Raul antonio de la cruz hernandez

2 weeks ago

65
Card Slider

Author:
Maxim

8 months ago

1.4k
Responsive Card

Author:
ariaw

8 months ago

628
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.6k
cards order
odering samethng

Author:
Uwase Alliance

6 months ago

768
credit card checkout

Author:
Antony

1 year ago

3.1k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.6k
Cards Seaction - Services block

Author:
ABDO-SY

8 months ago

1.4k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

6 months ago

1k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

9 months ago

777
card profie
profile card

Author:
Aman kumar

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components