Shoping cart

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

Shopping cart

Author Moriba Traore

Tailwind v3.4 13.9k 15

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

JaxStone

3 years ago

16.4k
Checkout page template

JaxStone

3 years ago

24.7k
Shopping cart

Ron Hicks

3 years ago

16.8k
Checkout card

JaxStone

3 years ago

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

Anonymous

2 years ago

8.8k
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
bonimator dash board
bonimator dash board

Bonimater

1 year ago

910
shoping products
Shopping products

Abhiraj

1 year ago

2.3k
Shopping Cart -Card

ABDO-SY

1 year ago

2.7k
shopp of shoes
shopp style

Nezerwa Debora

1 year ago

1.6k
Empty Shopping Cart

JUGENDRA GANGWAR

1 week ago

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

Abhiraj

1 year ago

2.5k