Tailwind E-Commerce (Orders) Components

<section class="pt-12 pb-24 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
      <li class="mr-6">
        <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
          <span>Home</span>
          <svg class="ml-6" width="4" height="7" viewbox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
          </svg>
        </a>
      </li>
      <li class="mr-6">
        <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
          <span>Store</span>
          <svg class="ml-6" width="4" height="7" viewbox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
          </svg>
        </a>
      </li>
      <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Your cart</a></li>
    </ul>
    <div class="pb-9 mb-7 text-center border-b border-black border-opacity-5">
      <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Billing address</h2>
    </div>
    <div class="flex flex-wrap -mx-4 mb-14 xl:mb-24">
      <div class="w-full md:w-8/12 lg:w-3/4 px-4 mb-14 md:mb-0">
        <div class="py-20 px-8 md:px-16 bg-white rounded-3xl">
          <div class="pb-16 mb-14 border-b border-gray-200 border-opacity-30">
            <div class="max-w-lg mx-auto">
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Your name:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Username:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Address 1:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
              <div class="flex flex-wrap items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Address 2:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
            </div>
          </div>
          <div class="pb-16 mb-14 border-b border-gray-200 border-opacity-30">
            <div class="max-w-lg mx-auto mb-16">
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Country:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">State:</label>
                </div>
                <div class="w-full md:w-2/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
              <div class="flex flex-wrap mb-6 items-center">
                <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                  <label class="text-lg text-darkBlueGray-400">Zip code:</label>
                </div>
                <div class="w-full md:w-1/3">
                  <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
                </div>
              </div>
            </div>
            <div class="md:ml-16">
              <label class="relative flex mb-8 items-center">
                <input class="relative ml-10 appearance-none" type="checkbox">
                <button class="absolute top-1/2 left-0 transform -translate-y-1/2 h-6 w-6">
                  <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="27" height="27" rx="8" fill="#28E172"></rect>
                    <path d="M11.4534 19L6 13.6758L6.72022 12.9726L11.4534 17.5937L21.2798 8L22 8.70316L11.4534 19Z" fill="white"></path>
                  </svg>
                </button>
                <span class="ml-2 text-sm text-gray-400">Shipping address is the same as my billing address</span>
              </label>
              <label class="relative flex items-center">
                <input class="relative ml-10 appearance-none" type="checkbox">
                <button class="absolute top-1/2 left-0 transform -translate-y-1/2 h-6 w-6">
                  <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="26" height="26" rx="7.5" stroke="#348BF6"></rect></svg>
                </button>
                <span class="ml-2 text-sm text-gray-400">Save this information for next time</span>
              </label>
            </div>
          </div>
          <div class="mb-16 md:ml-16">
            <label class="relative inline-flex mb-5 mr-16 items-center">
              <input class="relative ml-10 appearance-none" type="checkbox">
              <button class="absolute top-1/2 left-0 transform -translate-y-1/2 h-6 w-6">
                <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="27" height="27" rx="8" fill="#28E172"></rect>
                  <path d="M11.4534 19L6 13.6758L6.72022 12.9726L11.4534 17.5937L21.2798 8L22 8.70316L11.4534 19Z" fill="white"></path>
                </svg>
              </button>
              <span class="ml-2 text-sm text-gray-400 leading-3">Credit card</span>
            </label>
            <label class="relative inline-flex mb-5 mr-16 items-center">
              <input class="relative ml-10 appearance-none" type="checkbox">
              <button class="absolute top-1/2 left-0 transform -translate-y-1/2 h-6 w-6">
                <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="26" height="26" rx="7.5" stroke="#348BF6"></rect></svg>
              </button>
              <span class="ml-2 text-sm text-gray-400 leading-3">Debit card</span>
            </label>
            <label class="relative inline-flex mb-5 items-center">
              <input class="relative ml-10 appearance-none" type="checkbox">
              <button class="absolute top-1/2 left-0 transform -translate-y-1/2 h-6 w-6">
                <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="26" height="26" rx="7.5" stroke="#348BF6"></rect></svg>
              </button>
              <span class="ml-2 text-sm text-gray-400 leading-3">PayPal</span>
            </label>
          </div>
          <div class="max-w-lg mx-auto">
            <div class="flex flex-wrap mb-6 items-center">
              <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                <label class="text-lg text-darkBlueGray-400">Name on card:</label>
              </div>
              <div class="w-full md:w-2/3">
                <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
              </div>
            </div>
            <div class="flex flex-wrap mb-6 items-center">
              <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                <label class="text-lg text-darkBlueGray-400">Credit card number:</label>
              </div>
              <div class="w-full md:w-2/3">
                <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
              </div>
            </div>
            <div class="flex flex-wrap mb-6 items-center">
              <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                <label class="text-lg text-darkBlueGray-400">Expiration:</label>
              </div>
              <div class="w-full md:w-2/3">
                <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
              </div>
            </div>
            <div class="flex flex-wrap items-center">
              <div class="w-full md:w-1/3 mb-2 md:mb-0 md:pr-10 md:text-right">
                <label class="text-lg text-darkBlueGray-400">CVV:</label>
              </div>
              <div class="w-full md:w-1/3">
                <input class="w-full px-5 py-3 text-lg leading-9 bg-blue-50 border-2 border-blue-400 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="text">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-4/12 lg:w-1/4 px-4">
        <div>
          <h2 class="mb-7 lg:mt-6 text-3xl font-heading font-medium">Order summary</h2>
          <div class="flex items-center justify-between py-4 px-10 mb-3 leading-8 bg-white bg-opacity-50 font-heading font-medium rounded-3xl">
            <span>Subtotal</span>
            <span class="flex items-center text-xl">
              <span class="mr-2 text-base">$</span>
              <span>710,70</span>
            </span>
          </div>
          <div class="flex items-center justify-between py-4 px-10 mb-3 leading-8 bg-white bg-opacity-50 font-heading font-medium rounded-3xl">
            <span>Shipping</span>
            <span class="flex items-center text-xl">
              <span class="mr-2 text-base">$</span>
              <span>10,00</span>
            </span>
          </div>
          <div class="flex items-center justify-between py-4 px-10 mb-14 leading-8 bg-white font-heading font-medium rounded-3xl">
            <span>Total</span>
            <span class="flex items-center text-xl text-blue-500">
              <span class="mr-2 text-base">$</span>
              <span>720,70</span>
            </span>
          </div>
          <h4 class="mb-4 text-3xl font-heading font-medium">Discount code</h4>
          <label class="block mb-3 text-lg text-darkBlueGray-400">Apply code:</label>
          <div class="relative mb-3 lg:mb-10">
            <input class="flex-grow outline-none px-5 pr-36 py-4 w-full leading-7 bg-white border-2 border-blue-500 rounded-3xl" type="text">
            <a class="absolute top-1/2 transform -translate-y-1/2 right-1 -translate-x-px w-auto xl:w-auto py-3 px-8 text-lg leading-7 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Apply</a>
          </div>
          <a class="inline-block w-full py-5 lg:py-3 px-10 text-lg leading-6 lg:leading-7 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Checkout</a>
        </div>
      </div>
    </div>
    <div class="md:w-96"><a class="block py-5 px-10 w-full text-xl leading-6 font-medium tracking-tighter font-heading text-center bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Back to shop</a></div>
  </div>
</section>