E-Commerce (Orders) Components in Shopal library

<section class="py-12 md:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-6xl mx-auto">
      <h3 class="text-2xl font-bold">Cart</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
          <div class="pt-12">
            <div class="overflow-x-scroll mb-6">
              <table class="w-full min-w-max table-auto border-b-2 border-black">
                <thead>
                  <tr class="border-b-2 border-black"><th class="pb-5 text-sm font-bold text-left">Product</th><th class="px-8 pb-5 text-sm font-bold text-left">Price</th><th class="px-8 pb-5 text-sm font-bold text-left">Quantity</th><th class="pb-5 text-sm font-bold text-right">Subtotal</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="h-28 pt-6 pr-8">
                      <div class="flex h-full items-center -mx-3">
                        <div class="w-auto px-3">
                          <img class="img-fluid w-20 h-20 border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                        </div>
                        <div class="w-auto flex-grow px-3">
                          <h4 class="text-base font-bold leading-none">Main Name for Product</h4>
                          <span class="text-sm font-bold">Small description</span>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 pt-6 px-8">
                      <div class="flex h-full items-center text-base font-bold">$66.00</div>
                    </td>
                    <td class="h-28 pt-6 px-8">
                      <div class="flex h-full items-center">
                        <div class="flex h-12 w-24 px-2 items-center justify-between bg-white border-2 border-black rounded-md" x-data="{ quantity: 1 }">
                          <button x-on:click="quantity > 1 ? quantity-- : quantity" class="flex w-3.5 h-3.5 px-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                            <div class="h-px mx-px w-full bg-white"></div>
                          </button>
                          <input x-model="quantity" class="w-10 text-center text-sm font-bold placeholder-black text-black outline-none" type="number">
                          <button x-on:click="quantity++" class="relative flex w-3.5 h-3.5 px-px py-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                            <div class="relative h-full w-full py-px">
                              <div class="absolute top-1/2 left-0 h-px w-full bg-white"></div>
                              <div class="inline-block max-w-max mx-auto h-full bg-white">
                                <div class="inline-block px-px"></div>
                              </div>
                            </div>
                          </button>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 pt-6 pl-8">
                      <div class="flex h-full items-center text-base font-bold">$132.00</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="h-28 pr-8">
                      <div class="flex h-full items-center -mx-3">
                        <div class="w-auto px-3">
                          <img class="img-fluid w-20 h-20 border-2 border-black rounded-md" src="shopal-assets/products/product-square2.png" alt="">
                        </div>
                        <div class="w-auto flex-grow px-3">
                          <h4 class="text-base font-bold leading-none">Main Name for Product</h4>
                          <span class="text-sm font-bold">Small description</span>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 px-8">
                      <div class="flex h-full items-center text-base font-bold">$66.00</div>
                    </td>
                    <td class="h-28 px-8">
                      <div class="flex h-full items-center">
                        <div class="flex h-12 w-24 px-2 items-center justify-between bg-white border-2 border-black rounded-md" x-data="{ quantity: 1 }">
                            <button x-on:click="quantity > 1 ? quantity-- : quantity" class="flex w-3.5 h-3.5 px-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                              <div class="h-px mx-px w-full bg-white"></div>
                            </button>
                            <input x-model="quantity" class="w-10 text-center text-sm font-bold placeholder-black text-black outline-none" type="number">
                            <button x-on:click="quantity++" class="relative flex w-3.5 h-3.5 px-px py-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                              <div class="relative h-full w-full py-px">
                                <div class="absolute top-1/2 left-0 h-px w-full bg-white"></div>
                                <div class="inline-block max-w-max mx-auto h-full bg-white">
                                  <div class="inline-block px-px"></div>
                                </div>
                              </div>
                            </button>
                          </div>
                      </div>
                    </td>
                    <td class="h-28 pl-8">
                      <div class="flex h-full items-center text-base font-bold">$132.00</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="max-w-sm">
              <label class="block text-sm font-bold mb-2" for="">Enter Promo Code</label>
              <div class="flex">
                <input class="h-12 w-full py-3 px-4 mr-2 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="EASDDGFHGE5423">
                <button class="flex-shrink-0 group relative inline-block h-12 w-24 bg-blueGray-900 rounded-md" type="submit">
                  <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                    <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                      <span class="text-base font-black text-black">Apply</span>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="pt-8 pb-6 px-6 bg-green-500 border-2 border-black rounded-md shadow">
            <h4 class="font-bold mb-3">Cart totals</h4>
            <p class="text-sm font-bold mb-5">Shipping and additional costs are calculated based on values you have entered.</p>
            <div class="mb-6 border-2 border-black bg-white rounded-md">
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Order Subtotal</span>
                <span class="text-sm font-black">$390.00</span>
                <div class="absolute bottom-0 left-0 py-px bg-black w-11/12"></div>
              </div>
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Shipping and handling</span>
                <span class="text-sm font-black">$10.00</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 py-px bg-black w-10/12"></div>
              </div>
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Tax</span>
                <span class="text-sm font-black">$0.00</span>
                <div class="absolute bottom-0 left-0 py-px bg-black w-full"></div>
              </div>
              <div class="flex px-5 py-5 items-center justify-between">
                <span class="text-lg font-bold">Total</span>
                <span class="text-lg font-black text-green-600">$400.00</span>
              </div>
            </div>
            <button class="group relative inline-block h-12 w-full bg-blueGray-900 rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-black hover:bg-indigo-500 border-2 border-black rounded-md transition duration-300">
                  <span class="text-base font-black text-white">Go to Checkout</span>
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>