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

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

Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

3 months ago

600
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

10.2k
News Feed

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

6 months ago

1.2k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.6k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

10.3k
Thankyou Card

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

1 year ago

4.9k
Watch Card
Watch Cards

Author:
Anonymous

9 months ago

1.3k
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

11 months ago

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

3 months ago

316
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.2k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

3 months ago

286
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

533

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components