Purchase Modal Using Tailwind UI
A Purchase Modal component designed with Tailwind offers an interactive and visually appealing popup for users to conveniently review and complete their purchases, enhancing the overall shopping experience.
modal
Loading component...
88 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/22851636-Purchase-Modal -->
<div class="flex bg-[#EBDEDE] py-12">
<div class="relative w-full max-w-3xl p-1 mx-auto bg-white border shadow-lg border-white/20 rounded-3xl">
<div class="pb-32 bg-black rounded-3xl">
<svg xmlns="http://www.w3.org/2000/svg"
class="absolute w-8 h-8 p-1 text-gray-800 bg-gray-300 bg-opacity-50 rounded-full cursor-pointer top-5 right-5 "
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<div class="p-8 md:p-12 lg:px-24">
<div class="max-w-lg">
<h2 class="text-2xl font-semibold text-white md:text-3xl">Do more with premiumn</h2>
<p class="text-gray-400 sm:mt-4">
Subcribe today to become a star creator and enjoy exclusive
access to our premium benefits and features.
</p>
</div>
<div class="flex flex-col items-center mt-8 space-x-0 space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<p class="flex items-center text-lg text-left text-gray-200 ">
<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 p-1 mr-2 text-white bg-green-500 rounded-full">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Unlimited lessons
</p>
<p class="flex items-center text-lg text-left text-gray-200 ">
<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 p-1 mr-2 text-white bg-green-500 rounded-full">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Al suggestions
</p>
<p class="flex items-center text-lg text-left text-gray-200 ">
<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 p-1 mr-2 text-white bg-green-500 rounded-full">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Priority supports
</p>
</div>
</div>
</div>
<div class="p-4 mx-6 mb-12 -mt-24 bg-white sm:mx-12 rounded-2xl sm:p-8">
<span class="text-sm">You'll pay,</span>
<div class="flex items-end justify-between mt-6">
<h1 class="text-6xl font-bold">
$9 <span class="text-xl font-medium">.99 <span class="text-gray-600">/month</span></span>
</h1>
<button
class="px-4 py-2.5 rounded-full border border-gray-900 text-sm font-semibold hover:text-white hover:bg-black">Monthly
subscription
</button>
</div>
<hr class="my-6">
<span class="text-sm font-semibold">Card details</span>
<form action="">
<div class="flex items-center justify-between mt-2 border rounded-xl">
<input class="outline-none px-4 py-2.5 rounded-l-xl " type="text" placeholder="XXX XXX XXX XXX">
<input class="outline-none px-4 py-2.5" type="text" placeholder="MM / YY">
<input class="outline-none py-2.5 rounded-r-xl" type="text" placeholder="CVV">
</div>
<div class="flex items-center justify-between mt-10">
<a href="#" class="text-sm font-semibold hover:text-gray-500">More payment options</a>
<button
class="px-12 py-4 text-sm font-semibold bg-gray-900 rounded-xl text-gray-50 hover:bg-black">Pay
now
</button>
</div>
</form>
</div>
</div>
</div>