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

15.9k

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

2 years ago

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

Author:
Anonymous

1 year ago

7.6k
Shoping cart

Author:
Moriba Traore

2 years ago

13.1k
Shopping cart

Author:
Ron Hicks

2 years ago

16k
Checkout card

Author:
JaxStone

2 years ago

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

1 month ago

163
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

751
Shopping Cart -Card

Author:
ABDO-SY

7 months ago

1.3k
Best incamas to date

Author:
ORGIN_DREAMS

4 months ago

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

Author:
Abhiraj

8 months ago

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

4 months ago

495
shopp of shoes
shopp style

Author:
Nezerwa Debora

4 months ago

648

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components