Checkout Page Using Tailwind UI
A ‘Checkout Page’ component designed with Tailwind offers a well-structured and visually appealing interface for users to efficiently complete their purchase transactions, ensuring a seamless and user-friendly checkout process.
checkout
Loading component...
168 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/22363930-Checkout-Page -->
<section class="bg-[#C7CCD6]">
<div class="flex flex-wrap m-4 bg-white rounded-2xl">
<div class="w-full mb-10 sm:w-8/12">
<div class="container h-full p-10 mx-auto">
<nav class="flex items-center justify-between px-4">
<div class="text-lg font-extrabold">
<span class="text-2xl text-blue-500">@</span> Company
</div>
</nav>
<header class="container items-center px-4 mt-10 lg:flex">
<div class="w-full">
<h5 class="mb-4 text-sm font-medium text-gray-600">Customer Information</h5>
<div class="overflow-hidden">
<table class="min-w-full border rounded-md">
<thead class="border-b">
<tr>
<th scope="col" class="px-6 py-4 text-sm font-semibold text-left text-gray-900">
Vishnu Prasad V P
</th>
<th scope="col" class="px-6 py-4 text-sm font-medium text-left text-gray-900">
</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
+1 8078 9690
</td>
<td class="px-6 py-4 text-sm font-light text-gray-900 whitespace-nowrap">
[email protected]
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">United
States</td>
<td class="px-6 py-4 text-sm font-light text-gray-900 whitespace-nowrap">
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
California</td>
<td class="px-6 py-4 text-sm font-light text-gray-900 whitespace-nowrap">00012
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">433
Old Gate Ln, Milford</td>
<td class="px-6 py-4 text-sm font-light text-gray-900 whitespace-nowrap">
</td>
</tr>
</tbody>
</table>
</div>
<h5 class="mt-6 mb-4 text-sm font-medium text-gray-600">Customer Information</h5>
<div
class="flex flex-col items-center px-4 space-x-0 space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0 md:px-8">
<button
class="flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-gray-600 border border-gray-300 rounded shadow sm:w-1/2 hover:text-blue-500 group hover:border-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 mr-4 group-hover:text-blue-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" />
</svg>
e-Transfer
</button>
<button
class="flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-gray-600 border border-gray-300 rounded shadow sm:w-1/2 hover:text-blue-500 group hover:border-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 mr-4 group-hover:text-blue-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
</svg>
onLine
</button>
</div>
<h5 class="mt-6 mb-4 text-sm font-medium text-gray-600">Bank</h5>
<span class="text-sm font-semibold uppercase">cibc bank</span>
<button
class="flex items-center justify-center w-full px-4 py-3 mt-6 text-base font-semibold bg-blue-500 rounded-lg sm:mx-4 text-gray-50 hover:bg-blue-900">
Make Payment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 ml-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</header>
</div>
</div>
<div class="w-full p-4 sm:w-4/12">
<div class="pb-12 bg-blue-50 rounded-xl sm:pb-56">
<div class="pt-16 text-center">
<span class="text-base font-semibold text-gray-600">Total amount</span>
<p class="my-4 text-4xl font-bold text-blue-600">$160<span class="text-blue-400">.76</span></p>
<span class="flex items-center justify-center text-sm text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
Secure payment
</span>
</div>
<hr class="mx-12 my-8 bg-gray-800">
<ul class="px-8 space-y-6 ">
<li class="flex items-start justify-between">
<div class="flex flex-col col-span-3 pt-2">
<span class="text-sm font-semibold text-gray-600">Nike Dunk High Retro</span>
<span class="inline-block pt-2 text-xs text-gray-400">Size US 7</span>
</div>
<div class="col-span-2 pt-3">
<div class="flex items-center text-sm font-semibold">
<span class="text-gray-600">$148.00</span>
</div>
</div>
</li>
</ul>
<hr class="mx-12 my-8 bg-gray-800">
<div class="px-8">
<div class="flex justify-between mb-2 text-sm text-gray-600">
<span>Subtotal</span>
<span class="font-semibold text-gray-600">$148.00</span>
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>Shipping</span>
<span class="font-semibold text-gray-600">$11.76</span>
</div>
</div>
<hr class="mx-12 my-4 bg-gray-800">
<div class="flex justify-between px-8 pb-4 text-lg font-semibold text-gray-600">
<span>Total</span>
<span>€846.98</span>
</div>
</div>
</div>
</div>
</section>