Home
JaxStone
Checkout card

Checkout card

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

Shopping cart

Author JaxStone

10.8k

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

Author:
JaxStone

3 years ago

24.1k
Shopping cart template

Author:
JaxStone

3 years ago

16.1k
Shoping cart

Author:
Moriba Traore

3 years ago

13.4k
Shopping cart

Author:
Ron Hicks

3 years ago

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

Author:
Anonymous

2 years ago

8.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

4 months ago

693
Shoping Cart Popup

Author:
ABDO-SY

1 year ago

1.3k
shopp of shoes
shopp style

Author:
Nezerwa Debora

9 months ago

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

Author:
Nishimwe Jeanine

9 months ago

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

6 months ago

1.1k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

9 months ago

1.5k
Best incamas to date

Author:
ORGIN_DREAMS

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components