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

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

Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

5 months ago

676
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

3.6k
Article Card

Author:
Anonymous

1 year ago

2.3k
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

10 months ago

2.4k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

3 months ago

449
Watch Card
Watch Cards

Author:
Anonymous

11 months ago

1.5k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

16.7k
Card section
Card section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.5k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

4 months ago

473
less is more
less is more by salvator

Author:
Baraka Salvator

2 months ago

562
Food delivery ecommerce Card

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.3k
Tailwind card

Author:
Conan Hilton

2 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components