Checkout card

This tailwind example is contributed by JaxStone, on 07-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Shopping cart

Author JaxStone

Tailwind v3.4 11.6k 12

Fork Fullscreen

<div class="flex flex-col justify-center items-center min-h-screen">
    <div class="bg-gray-100 rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-6">Shopping Cart</h1>
        <div class="flex justify-between mb-4">
            <div class="flex items-center">
                <img src="https://via.placeholder.com/80" alt="Product Image" class="mr-4">
                <div>
                    <h2 class="font-bold">Product Name</h2>
                    <p class="text-gray-700">Product Description</p>
                </div>
            </div>
            <div class="flex items-center">
                <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                <div class="mx-4">
                    <input type="number" value="1" class="w-16 text-center">
                </div>
                <span class="font-bold">$19.99</span>
            </div>
        </div>
        <hr class="my-4">
        <div class="flex justify-between items-center">
            <span class="font-bold">Subtotal:</span>
            <span class="font-bold">$19.99</span>
        </div>
        <div class="flex justify-between items-center mt-4">
            <span>Taxes:</span>
            <span>$1.00</span>
        </div>
        <hr class="my-4">
        <div class="flex justify-between items-center">
            <span class="font-bold">Total:</span>
            <span class="font-bold">$20.99</span>
        </div>
        <div class="flex justify-center mt-6">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Checkout</button>
        </div>
    </div>
</div>

Related Examples

Checkout page template

JaxStone

3 years ago

24.7k
Shopping cart template

JaxStone

3 years ago

16.4k
Shoping cart

Moriba Traore

3 years ago

13.9k
Shopping cart

Ron Hicks

3 years ago

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

Anonymous

2 years ago

8.8k
shoping products
Shopping products

Abhiraj

1 year ago

2.3k
Shopping Cart
Shopping Cart

Tanvir Hasan Bappy (Tanvir)

1 year ago

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

mohit kulkarni

1 year ago

1.5k
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!

Ijila Itunu

9 months ago

837
shopping
Online shopping will help us find the things we want using our phone or computer and have them delivered to us.

Nishimwe Jeanine

1 year ago

1.3k
Shoping Cart Popup

ABDO-SY

1 year ago

1.7k
clothes
shopp clothes

Nirere Esther

1 year ago

1.4k