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.

16.2k

<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

24.1k
Shopping cart template

Author:
JaxStone

3 years ago

16.1k
Shoping cart

Author:
Moriba Traore

2 years ago

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

Author:
Anonymous

2 years ago

8.3k
Checkout card

Author:
JaxStone

2 years ago

10.8k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

5 months ago

1.1k
shopp of shoes
shopp style

Author:
Nezerwa Debora

9 months ago

1.1k
shoping products
Shopping products

Author:
Abhiraj

1 year ago

1.8k
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.2k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

2 months ago

293
Shoping Cart Popup

Author:
ABDO-SY

11 months ago

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

3 months ago

588

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components