Shopping cart template

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

Shopping cart

Author JaxStone

Tailwind v3.4 16.4k 8

Fork Fullscreen

<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row md:justify-between md:items-center">
        <h1 class="text-2xl font-bold my-4">Shopping Cart</h1>
        <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
      Checkout
    </button>
    </div>
    <div class="mt-8">
        <div class="flex flex-col md:flex-row border-b border-gray-400 py-4">
            <div class="flex-shrink-0">
                <img src="https://picsum.photos/id/237/150/150" alt="Product image" class="w-32 h-32 object-cover">
            </div>
            <div class="mt-4 md:mt-0 md:ml-6">
                <h2 class="text-lg font-bold">Product Title</h2>
                <p class="mt-2 text-gray-600">Product Description</p>
                <div class="mt-4 flex items-center">
                    <span class="mr-2 text-gray-600">Quantity:</span>
                    <div class="flex items-center">
                        <button class="bg-gray-200 rounded-l-lg px-2 py-1" disabled>-</button>
                        <span class="mx-2 text-gray-600">1</span>
                        <button class="bg-gray-200 rounded-r-lg px-2 py-1" disabled>+</button>
                    </div>
                    <span class="ml-auto font-bold">$20.00</span>
                </div>
            </div>
        </div>
        <div class="flex flex-col md:flex-row border-b border-gray-400 py-4">
            <div class="flex-shrink-0">
                <img src="https://picsum.photos/id/237/150/150" alt="Product image" class="w-32 h-32 object-cover">
            </div>
            <div class="mt-4 md:mt-0 md:ml-6">
                <h2 class="text-lg font-bold">Product Title</h2>
                <p class="mt-2 text-gray-600">Product Description</p>
                <div class="mt-4 flex items-center">
                    <span class="mr-2 text-gray-600">Quantity:</span>
                    <div class="flex items-center">
                        <button class="bg-gray-200 rounded-l-lg px-2 py-1" disabled>-</button>
                        <span class="mx-2 text-gray-600">1</span>
                        <button class="bg-gray-200 rounded-r-lg px-2 py-1" disabled>+</button>
                    </div>
                    <span class="ml-auto font-bold">$15.00</span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-end items-center mt-8">
        <span class="text-gray-600 mr-4">Subtotal:</span>
        <span class="text-xl font-bold">$35.00</span>
    </div>
</div>

Related Examples

Checkout page template

JaxStone

3 years ago

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

Anonymous

2 years ago

8.8k
Shoping cart

Moriba Traore

3 years ago

13.9k
Shopping cart

Ron Hicks

3 years ago

16.8k
Checkout card

JaxStone

3 years ago

11.6k
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
Shopping Cart
Shopping Cart

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.8k
Shop Now Amazon x
Product cards

ORGIN_DREAMS

1 year ago

1.8k
cart page

yogesh

3 months ago

311
bonimator dash board
bonimator dash board

Bonimater

1 year ago

910
Empty Shopping Cart

JUGENDRA GANGWAR

3 days ago

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

Homayoun

11 months ago

1.2k