PresentationPages
Checkout
Checkout
Copied
Checkout
We’ll show you the checkout page optimization tips that’ll make your visitors want.
Order summary
Shorts
Small
Jacket
Medium
Subtotal
$1.290
Shipping
$200
Total
$1.490
Thank you for supporting us!
Let's get in touch on any of these platforms.
<div class="w-full">
<nav class="absolute w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-3 lg:bg-transparent bg-white">
<div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
<a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase lg:text-white text-blueGray-500" href="#/"><img class="rounded-full mr-2" style="width: 30px;"><span>Notus Design System PRO</span></a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
<div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
<ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
<li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-500"><i class="lg:text-blueGray-300 text-blueGray-500 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a></li>
</ul>
<ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
<li class="relative">
<a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-800" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
<div class="hidden z-50">
<div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a></div>
</div>
</li>
<li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a></li>
<li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a></li>
<li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
</ul>
</div>
</div>
</nav>
<section class="flex relative items-center p-0 min-h-screen-60 max-h-440-px">
<div class="absolute w-full h-full block bg-blueGray-900 opacity-75 z-1 left-0 top-0"></div>
<div class="bg-blueGray-800 w-full h-full absolute bg-cover bg-50 z-0" style="background-image: url('../../assets/img/sections/photo-15.jpg');"></div>
<div class="relative h-full text-center text-white container mx-auto px-4 z-3 mb-16">
<div class="justify-center flex flex-wrap -mx-4">
<div class="px-12 px-4 relative w-full lg:w-6/12 w-full md:w-8/12">
<h1 class="text-4xl font-bold leading-tight">Checkout</h1>
<p class="text-lg opacity-75 pt-2">We’ll show you the checkout page optimization tips that’ll make your visitors want.</p>
</div>
</div>
</div>
<div class="w-full bottom-0 absolute z-2">
<div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
<polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
</svg>
</div>
</div>
</section>
<section class="relative bg-blueGray-100 py-12 z-2">
<div class="container mx-auto px-4 -mt-64">
<div class="flex flex-wrap -mx-4">
<div class="px-4 relative w-full lg:w-4/12">
<h3 class="text-4xl font-normal leading-normal mt-0 mb-2 text-white">Order summary</h3>
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
<div class="px-4 py-5 flex-auto">
<div class="items-center my-4 flex items-start">
<img src="https://demos.creative-tim.com/notus-pro-react/static/media/gucci.df54712f.png" class="mr-4 w-20 p-2" alt="...">
<div class="flex-1">
<div class="justify-between">
<h6 class="text-xl font-semibold leading-tight mb-1">Shorts</h6>
<p class="text-blueGray-500 uppercase font-bold text-xs">Small</p>
</div>
</div>
<span class="text-blueGray-700">$290</span>
</div>
<div class="items-center my-4 flex items-start">
<img src="https://demos.creative-tim.com/notus-pro-react/static/media/jacket.132b3c72.png" class="mr-4 w-20 p-2" alt="...">
<div class="flex-1">
<div class="justify-between">
<h6 class="text-xl font-semibold leading-tight mb-1">Jacket</h6>
<p class="text-blueGray-500 uppercase font-bold text-xs">Medium</p>
</div>
</div>
<span class="text-blueGray-700">$1.000</span>
</div>
<hr class="mt-6 mb-4 bg-blueGray-300 ml-0">
<div class="mb-0 pt-0 relative">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Discount</label>
<div class="mb-2 relative flex flex-wrap w-full items-stretch">
<div class="mr-2">
<div class="mb-3 pt-0"><input placeholder="Discount code" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="mb-0"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Apply</button></div>
</div>
</div>
<div>
<hr class="mt-4 mb-2 bg-blueGray-300 ml-0">
<div class="flex justify-between">
<h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Subtotal</h6>
<h6 class="leading-normal mt-0 mb-2">$1.290</h6>
</div>
<div class="flex justify-between">
<h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Shipping</h6>
<h6 class="leading-normal mt-0 mb-2">$200</h6>
</div>
</div>
<div>
<hr class="mt-4 mb-2 bg-blueGray-300 ml-0">
<div class="flex justify-between">
<h6 class="text-blueGray-700 leading-normal mt-0 mb-2">Total</h6>
<h6 class="leading-normal mt-0 mb-2">$1.490</h6>
</div>
</div>
</div>
</div>
</div>
<div class="px-4 relative w-full lg:w-8/12">
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg">
<div class="px-4 py-5 flex-auto">
<form>
<div class="container mx-auto px-4">
<h3 class="text-3xl font-semibold mt-4 mb-6">Billing address</h3>
<div class="flex flex-wrap -mx-4">
<div class="px-4 pb-2 relative w-full lg:w-6/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">First name*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. Smith" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-6/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Last name*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. John" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-6/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email address*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. [email protected]" type="email" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-6/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Phone*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. +1 (5417) 543 010" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-8/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Street address*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. 420 Long Beach, CA" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-4/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Postcode/Zip*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. 340112" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-4/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Apt, suite, etc.</label>
<div class="mb-3 pt-0"><input placeholder="E.g. YC7B 3UT" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-4/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">City*</label>
<div class="mb-3 pt-0"><input placeholder="E.g. London" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 pb-2 relative w-full lg:w-4/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Country*</label>
<div class="relative">
<div class="mb-3 pt-0"><input placeholder="Select Country" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
<div class="hidden z-50">
<div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Czech Republic</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Denmark</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Dominican Republic</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Iraq</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Israel</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Italy</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Jamaica</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Japan</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Madagascar</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Malta</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Norway</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Poland</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Portugal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Romania</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Russian Federation</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Saint Lucia</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Samoa</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">San Marino</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Saudi Arabia</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Select country</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Spain</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Swaziland</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Sweden</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Turkey</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Uganda</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Ukraine</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United Arab Emirates</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United Kingdom</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">United States</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Viet Nam</a></div>
</div>
</div>
</div>
</div>
<h3 class="text-3xl font-semibold mt-4 mb-6">Payment method</h3>
<ul class="flex-col md:flex-row flex flex-wrap list-none pl-0 mb-0">
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center"><a href="javascript:;" class="text-xs font-bold uppercase px-5 py-3 shadow rounded block leading-normal sm:mb-4 md:mb-0 uppercase duration-500 transition-all ease-in-out bg-pink-500 text-white">Credit Card</a></li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center"><a href="javascript:;" class="text-xs font-bold uppercase px-5 py-3 shadow rounded block leading-normal sm:mb-4 md:mb-0 uppercase duration-500 transition-all ease-in-out text-pink-500 bg-white">PayPal</a></li>
</ul>
<div class="w-full">
<div class="my-8 transform duration-500 transition-all ease-in-out block">
<div class="flex flex-wrap -mx-4">
<div class="px-4 relative w-full lg:w-12/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Card Number</label>
<div class="mb-3 pt-0"><input inputmode="numeric" pattern="[0-9s]{13,19}" maxlength="19" placeholder="E.g. 1234 1234 1234 1234" type="tel" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 relative w-full lg:w-7/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Card holder</label>
<div class="mb-3 pt-0"><input placeholder="E.g. SMITH JOHN" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 relative w-full lg:w-3/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Expiration</label>
<div class="mb-3 pt-0"><input placeholder="E.g. 01/24" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
<div class="px-4 relative w-full lg:w-2/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">CVC</label>
<div class="mb-3 pt-0"><input placeholder="E.g. 123" type="text" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
</div>
</div>
<div class="my-8 transform duration-500 transition-all ease-in-out hidden">
<div class="flex flex-wrap -mx-4">
<div class="px-4 relative w-full lg:w-12/12">
<label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label>
<div class="mb-3 pt-0"><input placeholder="E.g. [email protected]" type="email" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
</div>
</div>
</div>
</div>
<div class="flex justify-between mt-12 mb-8"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-blueGray-800 bg-blueGray-200 border-blueGray-200 active:bg-blueGray-300 active:border-blueGray-300 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Return to cart</button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Order now</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="pt-12 pb-4 border-b bg-blueGray-100">
<div class="container mx-auto px-4">
<div class="justify-between items-center flex flex-wrap -mx-4">
<div class="px-4 relative w-full lg:w-6/12">
<h3 class="text-xl font-bold leading-normal mt-0">Thank you for supporting us!</h3>
<h4 class="leading-normal mt-1 mb-2 text-blueGray-500">Let's get in touch on any of these platforms.</h4>
</div>
<div class="text-right pr-6 px-4 relative w-full lg:w-6/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-facebook"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-dribbble"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-github"></i></button></div>
</div>
</div>
</div>
<footer class="bg-blueGray-100">
<div class="container mx-auto px-4">
<div class="items-center xl:justify-between flex flex-wrap -mx-4">
<div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
<div class="text-center xl:text-left py-6 text-sm text-blueGray-500">Copyright © 2021<a href="https://www.creative-tim.com" target="_blank" class="font-semibold ml-1">Creative Tim</a>. All rights reserved.</div>
</div>
<div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
<ul class="justify-center xl:justify-end mx-auto flex flex-wrap list-none pl-0 mb-0">
<li><a href="https://www.creative-tim.com" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Creative Tim</a></li>
<li><a href="https://www.creative-tim.com/presentation" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">About us</a></li>
<li><a href="https://www.creative-tim.com/blog" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Blog</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>