Home
JaxStone
Shopping cart template

Shopping cart template

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

Shopping cart

Author JaxStone

16.2k

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

Author:
JaxStone

3 years ago

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

Author:
Anonymous

2 years ago

8.3k
Shoping cart

Author:
Moriba Traore

3 years ago

13.4k
Shopping cart

Author:
Ron Hicks

3 years ago

16.2k
Checkout card

Author:
JaxStone

3 years ago

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

694
bonimator dash board
bonimator dash board

Author:
Bonimater

7 months ago

536
Shoping Cart Popup

Author:
ABDO-SY

1 year ago

1.3k
shopping cart page product
Product page design single product, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.7k
Shopping Cart -Card

Author:
ABDO-SY

1 year ago

1.8k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

9 months ago

1.5k
shoping products
Shopping products

Author:
Abhiraj

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components