Home
Moriba Traore
Shoping cart

Shoping cart

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

Shopping cart

Author Moriba Traore

13k

Fork Fullscreen

<div class="max-w-md mx-auto mt-16 bg-white rounded-lg overflow-hidden md:max-w-lg border border-gray-400">
    <div class="px-4 py-2 border-b border-gray-200">
        <h2 class="font-semibold text-gray-800">Shopping Cart</h2>
    </div>
    <div class="flex flex-col divide-y divide-gray-200">
        <div class="flex items-center py-4 px-6">
            <img class="w-16 h-16 object-cover rounded" src="https://dummyimage.com/100x100/F3F4F7/000000.jpg" alt="Product Image">
            <div class="ml-3">
                <h3 class="text-gray-900 font-semibold">Product Name</h3>
                <p class="text-gray-700 mt-1">$9.99</p>
            </div>
            <button class="ml-auto py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
        Remove
      </button>
        </div>
        <div class="flex items-center py-4 px-6">
            <img class="w-16 h-16 object-cover rounded" src="https://dummyimage.com/100x100/F3F4F7/000000.jpg" alt="Product Image">
            <div class="ml-3">
                <h3 class="text-gray-900 font-semibold">Product Name</h3>
                <p class="text-gray-700 mt-1">$19.99</p>
            </div>
            <button class="ml-auto py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
        Remove
      </button>
        </div>
    </div>
    <div class="flex items-center justify-between px-6 py-3 bg-gray-100">
        <h3 class="text-gray-900 font-semibold">Total: $29.98</h3>
        <button class="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
      Checkout
    </button>
    </div>
</div>

Related Examples

Shopping cart template

Author:
JaxStone

2 years ago

15.8k
Checkout page template

Author:
JaxStone

2 years ago

23.6k
Shopping cart

Author:
Ron Hicks

2 years ago

16k
Checkout card

Author:
JaxStone

2 years ago

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

Author:
Anonymous

1 year ago

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

3 months ago

459
Shopping Cart -Card

Author:
ABDO-SY

6 months ago

1.3k
shoping products
Shopping products

Author:
Abhiraj

7 months ago

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

Author:
Abhiraj

7 months ago

1.3k
clothes
shopp clothes

Author:
Nirere Esther

3 months ago

132
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

5 days ago

57
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

611

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components