Home
JaxStone
Checkout page template

Checkout page template

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

Shopping cart

Author JaxStone

24.1k

Fork Fullscreen

<div class="bg-gray-100 h-screen py-8">
    <div class="container mx-auto px-4">
        <h1 class="text-2xl font-semibold mb-4">Shopping Cart</h1>
        <div class="flex flex-col md:flex-row gap-4">
            <div class="md:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6 mb-4">
                    <table class="w-full">
                        <thead>
                            <tr>
                                <th class="text-left font-semibold">Product</th>
                                <th class="text-left font-semibold">Price</th>
                                <th class="text-left font-semibold">Quantity</th>
                                <th class="text-left font-semibold">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="py-4">
                                    <div class="flex items-center">
                                        <img class="h-16 w-16 mr-4" src="https://via.placeholder.com/150" alt="Product image">
                                        <span class="font-semibold">Product name</span>
                                    </div>
                                </td>
                                <td class="py-4">$19.99</td>
                                <td class="py-4">
                                    <div class="flex items-center">
                                        <button class="border rounded-md py-2 px-4 mr-2">-</button>
                                        <span class="text-center w-8">1</span>
                                        <button class="border rounded-md py-2 px-4 ml-2">+</button>
                                    </div>
                                </td>
                                <td class="py-4">$19.99</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="md:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-semibold mb-4">Summary</h2>
                    <div class="flex justify-between mb-2">
                        <span>Subtotal</span>
                        <span>$19.99</span>
                    </div>
                    <div class="flex justify-between mb-2">
                        <span>Taxes</span>
                        <span>$1.99</span>
                    </div>
                    <div class="flex justify-between mb-2">
                        <span>Shipping</span>
                        <span>$0.00</span>
                    </div>
                    <hr class="my-2">
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold">Total</span>
                        <span class="font-semibold">$21.98</span>
                    </div>
                    <button class="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 w-full">Checkout</button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Shopping cart template

Author:
JaxStone

3 years ago

16.1k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

14.1k
Checkout card

Author:
JaxStone

2 years ago

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

Author:
Anonymous

2 years ago

8.3k
Shopping cart

Author:
Ron Hicks

3 years ago

16.2k
Shoping cart

Author:
Moriba Traore

2 years ago

13.3k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

8 months ago

1.4k
shopp of shoes
shopp style

Author:
Nezerwa Debora

8 months ago

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

527
bonimator dash board
bonimator dash board

Author:
Bonimater

6 months ago

482
shoping products
Shopping products

Author:
Abhiraj

1 year ago

1.8k
Best incamas to date

Author:
ORGIN_DREAMS

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components