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

12.1k

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