Pricing Page Using Tailwind UI
A pricing page created with Tailwind presents an attractive and informative layout, simplifying the comparison of different pricing plans and assisting users in selecting the right subscription option.
pricing
Loading component...
121 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/6480599-Sigma-Pricing-page -->
<section class="flex items-center justify-center bg-[#000]">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 lg:py-16">
<div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
<h2 class="mb-10 text-4xl font-bold tracking-tight text-white">Pay once, use forever</h2>
</div>
<div class="space-y-8 lg:grid md:grid-cols-3 lg:space-y-0 lg:gap-10">
<div
class="flex flex-col items-start max-w-lg pt-8 mx-auto space-y-8 text-gray-900 bg-white border border-gray-200 rounded-3xl ">
<div class="flex items-center justify-between w-full px-8">
<h3 class="text-4xl font-semibold">Basic</h3>
<span class="text-4xl">🙂</span>
</div>
<div class="flex items-center justify-between w-full px-8 my-8">
<span class="font-medium text-gray-400">Per year</span>
<span class="text-5xl font-extrabold">$43.<span class="text-xl align-top">99</span></span>
</div>
<p class="px-8 font-light text-gray-600 sm:text-sm">Best option for personal use & for your next
project.</p>
<ul role="list" class="w-full px-8 mb-8 space-y-4 text-sm text-left text-gray-600">
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Smart terminals</span>
<span class="font-semibold text-gray-900">maximun 2</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Product with marking</span>
<span>unavailable</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Sale of product</span>
<span>unavailable</span>
</li>
</ul>
<a
class="w-full py-6 text-base font-medium text-center text-white bg-gray-400 shadow-sm cursor-pointer rounded-b-3xl hover:-translate-y-1">
Current plan</a>
</div>
<div
class="flex flex-col items-start max-w-lg pt-8 mx-auto space-y-8 text-gray-900 bg-white border border-gray-200 rounded-3xl ">
<div class="flex items-center justify-between w-full px-8">
<h3 class="text-4xl font-semibold">Boost</h3>
<span class="text-4xl">🔥</span>
</div>
<div class="flex items-center justify-between w-full px-8 my-8">
<span class="font-medium text-gray-400">Per year</span>
<span class="text-5xl font-extrabold">$79.<span class="text-xl align-top">99</span></span>
</div>
<p class="px-8 font-light text-gray-600 sm:text-sm">Best option for personal use & for your next
project.</p>
<ul role="list" class="w-full px-8 mb-8 space-y-4 text-sm text-left text-gray-600">
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Smart terminals</span>
<span class="font-semibold text-gray-900">Ꝏ</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Product with marking</span>
<span class="font-semibold text-gray-900">optional</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Sale of product</span>
<span class="font-semibold text-gray-900">optional</span>
</li>
</ul>
<a
class="cursor-pointer bg-[#FD4649] w-full rounded-b-3xl py-6 text-center text-base font-medium text-white shadow-sm hover:-translate-y-1">
Current plan</a>
</div>
<div
class="flex flex-col items-start max-w-lg pt-8 mx-auto space-y-8 text-gray-900 bg-white border border-gray-200 rounded-3xl ">
<div class="flex items-center justify-between w-full px-8">
<h3 class="text-4xl font-semibold">Business</h3>
<span class="text-4xl">🚀</span>
</div>
<div class="flex items-center justify-between w-full px-8 my-8">
<span class="font-medium text-gray-400">Per year</span>
<span class="text-5xl font-extrabold">$179.<span class="text-xl align-top">99</span></span>
</div>
<p class="px-8 font-light text-gray-600 sm:text-sm">Best option for personal use & for your next
project.</p>
<ul role="list" class="w-full px-8 mb-8 space-y-4 text-sm text-left text-gray-600">
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Smart terminals</span>
<span class="font-semibold text-gray-900">Ꝏ</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Product with marking</span>
<span class="font-semibold text-gray-900">include</span>
</li>
<li class="flex items-center justify-between w-full">
<span class="font-semibold text-gray-900">Sale of product</span>
<span class="font-semibold text-gray-900">include</span>
</li>
</ul>
<a
class="cursor-pointer bg-[#FD4649] w-full rounded-b-3xl py-6 text-center text-base font-medium text-white shadow-sm hover:-translate-y-1">
Current plan</a>
</div>
</div>
</div>
</section>