Home
Ron Hicks
Shopping cart

Shopping cart

This tailwind example is contributed by Ron Hicks, on 14-Feb-2023. Component is made with Tailwind CSS v3.

16k

<div class="p-4 max-w-xl mx-auto mt-16">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <div class="flex items-center justify-between px-4 py-3 bg-gray-200">
            <h1 class="text-lg font-bold">Shopping Cart</h1>
            <span class="text-gray-600">(3 items)</span>
        </div>
        <div class="p-4">
            <div class="flex items-center mb-4">
                <img class="h-16 w-16 object-contain rounded-lg mr-4" src="https://picsum.photos/200/200"
                    alt="Product">
                <div class="flex-1">
                    <h2 class="text-lg font-bold">Product Title</h2>
                    <span class="text-gray-600">$29.99</span>
                </div>
                <button class="text-gray-600 hover:text-red-500">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M19 13H5v-2h14v2z" />
                    </svg>
                </button>
            </div>
            <div class="flex items-center mb-4">
                <img class="h-16 w-16 object-contain rounded-lg mr-4" src="https://picsum.photos/200/200"
                    alt="Product">
                <div class="flex-1">
                    <h2 class="text-lg font-bold">Product Title</h2>
                    <span class="text-gray-600">$19.99</span>
                </div>
                <button class="text-gray-600 hover:text-red-500">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M19 13H5v-2h14v2z" />
                    </svg>
                </button>
            </div>
            <div class="flex items-center">
                <img class="h-16 w-16 object-contain rounded-lg mr-4" src="https://picsum.photos/200/200"
                    alt="Product">
                <div class="flex-1">
                    <h2 class="text-lg font-bold">Product Title</h2>
                    <span class="text-gray-600">$24.99</span>
                </div>
                <button class="text-gray-600 hover:text-red-500">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M19 13H5v-2h14v2z" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="px-4 py-3 bg-gray-200">
            <div class="flex justify-between items-center">
                <span class="font-bold text-lg">Total:</span>
                <span class="font-bold text-lg">$74.97</span>
            </div>
            <button class="block w-full mt-4 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
                Checkout
            </button>
        </div>
    </div>
</div>

Related Examples

Checkout page template

Author:
JaxStone

2 years ago

23.9k
Shopping cart template

Author:
JaxStone

2 years ago

15.9k
Shoping cart

Author:
Moriba Traore

2 years ago

13.1k
Shopping cart page
this is the responsible shopping cart page

Author:
Anonymous

1 year ago

7.6k
Checkout card

Author:
JaxStone

2 years ago

10.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

409
shoping products
Shopping products

Author:
Abhiraj

9 months ago

1.7k
shopping cart page product
Product page design single product, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.5k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

1 week ago

108
clothes
shopp clothes

Author:
Nirere Esther

5 months ago

263
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

5 months ago

1k
Best incamas to date

Author:
ORGIN_DREAMS

5 months ago

547

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components