Upgrade Plan Using Tailwind UI
An Upgrade Plan section crafted with Tailwind provides a visually appealing and user-friendly interface for users to explore and select premium subscription options, enhancing their experience and access to additional features. Inspired design by Ildiko Gaspar from dribbble.
faqs
Loading component...
103 lines
<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16248268-Upgrade-Plan-UI-Design-->
<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>
<div class="h-screen flex flex-col justify-center mx-auto w-full items-center text-[#090B2E] bg-[#EEEFF9]">
<div class="flex items-end justify-between mb-2 w-80">
<h2 class="text-lg font-bold">Your plan</h2>
<p class="text-xs font-semibold underline cursor-pointer hover:text-indigo-900">Cange plan</p>
</div>
<card class="flex flex-col max-w-xl p-8 mx-auto space-y-8 text-gray-900 bg-white shadow-xl rounded-xl">
<p class="py-2 text-xs font-semibold text-center bg-gray-100 rounded-full">
Offer includes <span class="font-bold">first month free</span> of
charge
</p>
<div class="text-white">
<div class="bg-[#7374E2] flex flex-row items-start p-8 justify-between rounded-t-lg">
<div>
<h2 class="text-sm font-semibold">Premium Individual</h2>
<p class="mt-2 text-xs font-base">1 Account</p>
</div>
<p class="text-xs font-medium">$12/month</p>
</div>
<div class="grid grid-cols-12 p-8 gap-y-3 bg-[#7F81E3] rounded-b-lg">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<div class="flex items-center col-span-11 pl-2 text-xs font-light">
Only $12 after 1 month trial
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<div class="flex items-center col-span-11 pl-2 text-xs font-light">
You won't be charged until Sep 16, 2023
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<div class="flex items-center col-span-11 pl-2 text-xs font-light">
Cancel Anytime
</div>
</div>
</div>
<div>
<h2 class="mb-2 text-base font-semibold">Selected payment method</h2>
<div class="flex items-center gap-4">
<div class="flex items-center mb-4">
<input id="country-option-1" type="radio" name="countries" value="USA"
class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-1"
aria-describedby="country-option-1" checked="">
<label for="country-option-1" class="block ml-2 text-sm font-medium text-gray-900">
Credit or debit card
</label>
</div>
<div class="flex items-center mb-4">
<input id="country-option-2" type="radio" name="countries" value="Germany"
class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-2"
aria-describedby="country-option-2">
<label for="country-option-2" class="block ml-2 text-sm font-medium text-gray-900">
Paypal
</label>
</div>
</div>
</div>
<div class="col-span-12 mt-2 mb-5 text-gray-100">
<button
class="rounded hover:bg-indigo-900 bg-[#090B2E] w-full py-4 font-semibold text-xs flex items-center justify-center">
Continue
<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 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</card>
</div>