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