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

13.2k

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

16k
Checkout page template

Author:
JaxStone

2 years ago

24k
Shopping cart

Author:
Ron Hicks

2 years ago

16.1k
Checkout card

Author:
JaxStone

2 years ago

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

Author:
Anonymous

1 year ago

7.9k
Best incamas to date

Author:
ORGIN_DREAMS

7 months ago

873
clothes
shopp clothes

Author:
Nirere Esther

6 months ago

489
Shoping Cart Popup

Author:
ABDO-SY

9 months ago

968
bonimator dash board
bonimator dash board

Author:
Bonimater

4 months ago

360
shoping products
Shopping products

Author:
Abhiraj

11 months ago

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

1 month ago

306
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

927

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components