Plan Pricing Card Using Tailwind UI
The pricing plan designed with Tailwind CSS, inspired by @Keviduk on Twitter, offers a modern and attractive appearance to effectively communicate price options.
other
Loading component...
186 lines
<!-- design inspiration by https://twitter.com/Keviduk/status/1678666952204509184?t=aCKKyGs6YxKCq74qCCTwgw&s=19 -->
<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;
}
.bg-dark {
background-color: #131313;
}
.text-dark {
color: #131313;
}
.bg-primary {
background-color: #a3c834;
}
</style>
<div class="flex flex-col max-w-screen-xl px-10 py-20 mx-auto md:flex-row md:gap-10">
<div class="flex flex-col items-center justify-center flex-1 space-y-10 md:flex-row md:space-x-10">
<div class="flex flex-col lg:flex-row md:gap-10">
<div class="flex-1 py-16 pr-12 bg-white pl-7 rounded-3xl">
<div class="flex flex-col justify-between pb-4">
<p class="text-2xl font-bold leading-none">Propesional</p>
</div>
<div class="relative py-5">
<div class="flex-grow border-t border-gray-200"></div>
</div>
<div class="py-4 text-base font-normal text-gray-800">
<ul class="flex flex-col gap-3">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z">
</path>
</svg>
Virtual Credit Cards
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z">
</path>
</svg>
Finacial Analytics
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z">
</path>
</svg>
API Integration
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z">
</path>
</svg>
Canccel Anytime
</li>
</ul>
</div>
<div class="relative py-5">
<div class="flex-grow border-t border-gray-200"></div>
</div>
<div class="flex flex-col items-center justify-between sm:flex-row">
<p class="mb-4 text-base font-normal sm:mb-0 sm:mr-6">3.990$ <span class="text-gray-400">/ month</span></p>
<button class="flex items-center w-full sm:w-auto px-4 py-2.5 rounded-full bg-dark text-white">
<p class="w-full mr-1 text-sm font-medium text-center">Start now</p>
<svg class="w-5 h-5 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 13H4V11H12V4L20 12L12 20V13Z" fill="rgba(255,255,255,1)"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row md:gap-10">
<div class="flex-1 py-10 pr-12 pl-7 bg-dark rounded-3xl">
<div class="pb-4">
<span class="px-4 py-1 text-xs font-medium text-gray-100 uppercase border border-gray-200 rounded-full">most
popular</span>
<p class="mt-4 text-3xl font-bold leading-none text-white">Unlimited</p>
</div>
<div class="relative py-5">
<div class="flex-grow border-t border-gray-200"></div>
</div>
<div
class="flex flex-col py-4 space-y-4 text-base font-normal text-gray-800 sm:flex-row sm:items-center sm:space-x-10">
<ul class="flex flex-col gap-3 text-gray-100">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
Virtual Credit Cards
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</svg>
Finacial Analytics
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
API Integration
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
Canccel Anytime
</li>
</ul>
<ul class="flex flex-col gap-3 text-gray-100">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
Virtual Credit Cards
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</svg>
Finacial Analytics
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
API Integration
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"
fill="rgba(255,255,255,1)"></path>
</svg>
Canccel Anytime
</li>
</ul>
</div>
<div class="relative py-5">
<div class="flex-grow border-t border-gray-200"></div>
</div>
<div class="flex flex-col items-center justify-between sm:flex-row">
<p class="mb-4 text-base font-normal text-white sm:mb-0 sm:mr-6">3.990$ <span class="text-gray-300">/
month</span></p>
<button class="flex items-center w-auto sm:w-auto px-4 py-2.5 rounded-full bg-primary text-white">
<p class="w-full mr-1 text-sm font-medium text-center">Start now</p>
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 13H4V11H12V4L20 12L12 20V13Z" fill="rgba(255,255,255,1)"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>