Tailwind Pricing UI Design
Explore our tailwind pricing UI design to fit your website. Choose the best tailwind pricing ui for your website.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Basic Plan
$39
/ month
-
10 deploys per day
-
10 GB of storage
-
3 domains
-
SSL Certificates
Pro Plan
$59
/ month
-
100 deploys per day
-
50 GB of storage
-
Unlimited domains
-
SSL Certificates
Enterprise Plan
$69
/ month
-
150 deploys per day
-
20 GB of storage
-
5 domains
-
SSL Certificates
Show Code
<div class="relative px-4 lg:px-0 max-w-7xl mx-auto">
<div class="grid lg:grid-cols-3 gap-10">
<div>
<div class="p-8 bg-gray-900 rounded">
<div class="mb-4 text-center">
<p class="text-xl font-medium mb-4 tracking-wide text-white">
Basic Plan
</p>
<div class="flex items-center justify-center">
<p class="mr-2 text-5xl font-semibold text-white lg:text-6xl">
$39
</p>
<p class="text-lg text-gray-200">/ month</p>
</div>
</div>
<ul class="mb-8 space-y-2">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">10 deploys per day</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">10 GB of storage</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">3 domains</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">SSL Certificates</p>
</li>
</ul>
<button
type="submit"
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-emerald-600 hover:bg-emerald-700 focus:shadow-outline focus:outline-none"
>
Get Now
</button>
</div>
<div class="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
<div class="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
<div class="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
</div>
<div>
<div class="p-8 bg-gray-900 rounded">
<div class="mb-4 text-center">
<p class="text-xl font-medium mb-4 tracking-wide text-white">Pro Plan</p>
<div class="flex items-center justify-center">
<p class="mr-2 text-5xl font-semibold text-white lg:text-6xl">
$59
</p>
<p class="text-lg text-gray-200">/ month</p>
</div>
</div>
<ul class="mb-8 space-y-2">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">100 deploys per day</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">50 GB of storage</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">Unlimited domains</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-medium ml-2 text-gray-300">SSL Certificates</p>
</li>
</ul>
<button
type="submit"
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-emerald-600 hover:bg-emerald-700 focus:shadow-outline focus:outline-none"
>
Get Now
</button>
</div>
<div class="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
<div class="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
<div class="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
</div>
<div>
<div class="p-8 bg-gray-900 rounded">
<div class="mb-4 text-center">
<p class="text-xl mb-4 font-medium tracking-wide text-white">
Enterprise Plan
</p>
<div class="flex items-center justify-center">
<p class="mr-2 text-5xl font-semibold text-white lg:text-6xl">
$69
</p>
<p class="text-lg text-gray-200">/ month</p>
</div>
</div>
<ul class="mb-8 space-y-2">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-normal ml-2 text-gray-300">150 deploys per day</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-normal ml-2 text-gray-300">20 GB of storage</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-normal ml-2 text-gray-300">5 domains</p>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-emerald-400" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
<p class="font-normal ml-2 text-gray-300">SSL Certificates</p>
</li>
</ul>
<button
type="submit"
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-emerald-600 hover:bg-emerald-700 focus:shadow-outline focus:outline-none"
>
Get Now
</button>
</div>
<div class="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
<div class="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
<div class="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
</div>
</div>
</div>Preview
Pricing table
Change your plant according your needs
| Features | Basic 1 Month | Popular Plan Standard 2 Months | Advanced 3 Months | Featured 1 Month | Enterprise 1 Month |
|---|---|---|---|---|---|
| Fast Globally (Edge Network) | |||||
| Automatic CI/CD (Git Integration) | |||||
| Functions (Serverless, Edge) | |||||
| Starter Database (KV, Postgres) | |||||
| Web Analytics | |||||
| Community Support | |||||
Show Code
<div class="py-12 px-4 lg:px-0">
<div class="max-w-6xl mx-auto">
<div class="text-center">
<h2 class="text-gray-800 text-3xl font-bold mb-3">Pricing table</h2>
<p class="text-sm text-gray-500">Change your plant according your needs</p>
</div>
<div class="overflow-x-auto mt-12">
<table class="min-w-full border">
<thead class="whitespace-nowrap">
<tr class="h-24">
<th class="text-gray-800 px-2 py-1 font-semibold text-lg">
Features
</th>
<th class="text-gray-800 px-2 py-1 font-semibold text-lg w-48">
Basic
<p class="text-xs text-gray-500 font-medium mt-1">1 Month</p>
</th>
<th class="text-gray-800 px-2 py-1 font-semibold text-lg w-48 relative">
<span class="px-2 leading-6 text-[10px] font-semibold text-white bg-red-500 absolute top-0">Popular Plan</span>
Standard
<p class="text-xs text-gray-500 font-medium mt-1">2 Months</p>
</th>
<th class="text-gray-800 px-2 py-1 font-semibold text-lg w-48">
Advanced
<p class="text-xs text-gray-500 font-medium mt-1">3 Months</p>
</th>
<th class="text-gray-800 px-2 py-1 font-semibold text-lg w-48">
Featured
<p class="text-xs text-gray-500 font-medium mt-1">1 Month</p>
</th>
<th class="text-gray-800 px-2 py-1 font-semibold text-lg w-48">
Enterprise
<p class="text-xs text-gray-500 font-medium mt-1">1 Month</p>
</th>
</tr>
</thead>
<tbody class="whitespace-nowrap border">
<tr>
<td class="p-4 text-sm text-gray-500">
Fast Globally (Edge Network)
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td class="p-4 text-sm text-gray-500">
Automatic CI/CD (Git Integration)
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td class="p-4 text-sm text-gray-500">
Functions (Serverless, Edge)
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td class="p-4 text-sm text-gray-500">
Starter Database (KV, Postgres)
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td class="p-4 text-sm text-gray-500">
Web Analytics
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td class="p-4 text-sm text-gray-500">
Community Support
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
<td class="p-4 text-center">
<div class="w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" class="fill-green-500" viewBox="0 0 256 256">
<path
d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
></path>
</svg>
</div>
</td>
</tr>
<tr>
<td></td>
<td class="p-4 text-center">
<button type="button" class="w-max px-3 py-1.5 text-base font-semibold border border-gray-200 rounded">
$50 <span class="text-xs ml-1 text-gray-500 font-medium">Save 29%</span>
</button>
</td>
<td class="p-4 text-center">
<button type="button" class="w-max px-3 py-1.5 text-base font-semibold border border-gray-200 rounded">
$55 <span class="text-xs ml-1 text-gray-500 font-medium">Save 32%</span>
</button>
</td>
<td class="p-4 text-center">
<button type="button" class="w-max px-3 py-1.5 text-base font-semibold border border-gray-200 rounded">
$60 <span class="text-xs ml-1 text-gray-500 font-medium">Save 35%</span>
</button>
</td>
<td class="p-4 text-center">
<button type="button" class="w-max px-3 py-1.5 text-base font-semibold border border-gray-200 rounded">
$180 <span class="text-xs ml-1 text-gray-500 font-medium">Save 30%</span>
</button>
</td>
<td class="p-4 text-center">
<button type="button" class="w-max px-3 py-1.5 text-base font-semibold border border-gray-200 rounded">
$300 <span class="text-xs ml-1 text-gray-500 font-medium">Save 30%</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Preview
Personal
$59 / year
Perfect for using in a personal website or a client project.
1 User
All UI components
Lifetime access
Free updates
Use on 1 (one) project
3 Months support
Business
$199 / year
Perfect for business website or a big client project.
4 User
All UI components
Lifetime access
Free updates
Use on 2 (one) project
3 Months support
Professional
$399 / year
Perfect for large business website or a client project.
10 User
All UI components
Lifetime access
Free updates
Use on 3 (one) project
6 Months support
Show Code
<section class="relative z-10 overflow-hidden py-12">
<div class="container mx-auto px-4 lg:px-0">
<div class="grid grid-cols-1 gap-y-4 sm:gap-x-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="relative rounded-xl border p-6">
<span class="text-[#AE445A] mb-3 block text-lg font-semibold"> Personal </span>
<h2 class="mb-5 text-6xl font-bold">
<span>$59</span>
<span class="text-base font-medium"> / year </span>
</h2>
<p class="border-stroke mb-8 border-b pb-8 text-base">Perfect for using in a personal website or a client project.</p>
<ul class="flex mb-9 flex-col gap-3">
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>1 User</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>All UI components</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Lifetime access</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Free updates</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Use on 1 (one) project</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>3 Months support</p>
</li>
</ul>
<button class="hover:border-primary block w-full rounded-md border p-3 text-center font-medium transition hover:bg-[#AE445A] hover:text-white">Choose Personal</button>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg width="77" height="172" viewBox="0 0 77 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="86" y1="0" x2="86" y2="172" gradientUnits="userSpaceOnUse">
<stop stop-color="#E8BCB9" stop-opacity="0.4" />
<stop offset="1" stop-color="#E8BCB9" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
</div>
</div>
<div class="relative rounded-xl border p-6">
<span class="text-[#AE445A] mb-3 block text-lg font-semibold"> Business </span>
<h2 class="mb-5 text-6xl font-bold">
<span>$199</span>
<span class="text-base font-medium"> / year </span>
</h2>
<p class="border-stroke mb-8 border-b pb-8 text-base">Perfect for business website or a client project.</p>
<ul class="flex mb-9 flex-col gap-3">
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>4 User</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>All UI components</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Lifetime access</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Free updates</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Use on 2 (one) project</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>3 Months support</p>
</li>
</ul>
<button class="hover:border-primary block w-full rounded-md border p-3 text-center font-medium transition hover:bg-[#AE445A] hover:text-white">Choose Personal</button>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg width="77" height="172" viewBox="0 0 77 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="86" y1="0" x2="86" y2="172" gradientUnits="userSpaceOnUse">
<stop stop-color="#E8BCB9" stop-opacity="0.4" />
<stop offset="1" stop-color="#E8BCB9" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
</div>
</div>
<div class="relative rounded-xl border p-6">
<span class="text-[#AE445A] mb-3 block text-lg font-semibold"> Professional </span>
<h2 class="mb-5 text-6xl font-bold">
<span>$399</span>
<span class="text-base font-medium"> / year </span>
</h2>
<p class="border-stroke mb-8 border-b pb-8 text-base">Perfect for large business website or a client project.</p>
<ul class="flex mb-9 flex-col gap-3">
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>10 User</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>All UI components</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Lifetime access</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Free updates</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>Use on 3 (one) project</p>
</li>
<li class="flex items-center gap-x-4 text-base">
<p class="inline-flex h-2 w-2 rounded-full bg-black" />
<p>6 Months support</p>
</li>
</ul>
<button class="hover:border-primary block w-full rounded-md border p-3 text-center font-medium transition hover:bg-[#AE445A] hover:text-white">Choose Personal</button>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg width="77" height="172" viewBox="0 0 77 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="86" y1="0" x2="86" y2="172" gradientUnits="userSpaceOnUse">
<stop stop-color="#E8BCB9" stop-opacity="0.4" />
<stop offset="1" stop-color="#E8BCB9" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
</div>
</div>
</div>
</div>
</section>Preview
Monthly Annually
Monthly
Annually
Starter
$0
You’re new to investing but want to do it right. Get started for free.
- Commission-free trading
- Multi-layered encryption
- One tip every day
- Invest up to $1,500 each month
Investor
$7
You’ve been investing for a while. Invest more and grow your wealth faster.
- Commission-free trading
- Multi-layered encryption
- One tip every hour
- Invest up to $15,000 each month
- Basic transaction anonymization
VIP
$199
You’ve got a huge amount of assets but it’s not enough. To the moon.
- Commission-free trading
- Multi-layered encryption
- Real-time tip notifications
- No investment limits
- Advanced transaction anonymization
- Automated tax-loss harvesting
Show Code
<section class="mx-auto my-4 max-w-7xl px-4 xl:px-0">
<div class="flex justify-center">
<div class="relative">
<div class="grid grid-cols-2">
<span
class="cursor-pointer border border-gray-300 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.2)-1px)] text-sm text-gray-700 outline-2 outline-offset-2 transition-colors hover:border-gray-400 rounded-l-lg"
>
Monthly
</span>
<span
class="cursor-pointer border border-gray-300 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.2)-1px)] text-sm text-gray-700 outline-2 outline-offset-2 transition-colors hover:border-gray-400 -ml-px rounded-r-lg"
>
Annually
</span>
</div>
<div class="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300 [clip-path:inset(0_50%_0_0)]">
<div class="py-2 text-center text-sm font-semibold text-white">Monthly</div>
<div class="py-2 text-center text-sm font-semibold text-white -ml-px">Annually</div>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 items-start gap-x-4 xl:gap-x-6 gap-y-10 md:grid-cols-3">
<section class="flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 bg-white">
<h3 class="flex items-center text-sm font-semibold text-gray-900">
<svg viewBox="0 0 40 40" aria-hidden="true" class="h-6 w-6 flex-none fill-gray-300">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20ZM4 20c0 7.264 5.163 13.321 12.02 14.704C17.642 35.03 19 33.657 19 32V8c0-1.657-1.357-3.031-2.98-2.704C9.162 6.68 4 12.736 4 20Z"
></path>
</svg>
<span class="ml-4">Starter</span>
</h3>
<p class="relative mt-5 flex text-3xl tracking-tight text-gray-900">$0</p>
<p class="mt-3 text-sm text-gray-700">You’re new to investing but want to do it right. Get started for free.</p>
<div class="order-last mt-6">
<ul class="-my-2 divide-y text-sm divide-gray-200 text-gray-700">
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Commission-free trading</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Multi-layered encryption</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">One tip every day</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Invest up to $1,500 each month</span>
</li>
</ul>
</div>
<a
class="inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80 mt-6"
color="gray"
aria-label="Get started with the Starter plan for [object Object]"
href="/"
>
Get started for free
</a>
</section>
<section class="flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 bg-white">
<h3 class="flex items-center text-sm font-semibold text-gray-900">
<svg viewBox="0 0 40 40" aria-hidden="true" class="h-6 w-6 flex-none fill-gray-500">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20ZM4 20c0 7.264 5.163 13.321 12.02 14.704C17.642 35.03 19 33.657 19 32V8c0-1.657-1.357-3.031-2.98-2.704C9.162 6.68 4 12.736 4 20Z"
></path>
</svg>
<span class="ml-4">Investor</span>
</h3>
<p class="relative mt-5 flex text-3xl tracking-tight text-gray-900">
<span aria-hidden="false" class="transition duration-300">$7</span><span aria-hidden="true" class="absolute left-0 top-0 transition duration-300 pointer-events-none -translate-x-6 select-none opacity-0">$70</span>
</p>
<p class="mt-3 text-sm text-gray-700">You’ve been investing for a while. Invest more and grow your wealth faster.</p>
<div class="order-last mt-6">
<ul class="-my-2 divide-y text-sm divide-gray-200 text-gray-700">
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Commission-free trading</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Multi-layered encryption</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">One tip every hour</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Invest up to $15,000 each month</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-cyan-500">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Basic transaction anonymization</span>
</li>
</ul>
</div>
<a
class="inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80 mt-6"
color="gray"
aria-label="Get started with the Investor plan for [object Object]"
variant="solid"
href="/"
>
Purchase Plan
</a>
</section>
<section class="flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 order-first bg-gray-900 lg:order-none">
<h3 class="flex items-center text-sm font-semibold text-white">
<svg viewBox="0 0 40 40" aria-hidden="true" class="h-6 w-6 flex-none fill-cyan-500">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20ZM4 20c0 7.264 5.163 13.321 12.02 14.704C17.642 35.03 19 33.657 19 32V8c0-1.657-1.357-3.031-2.98-2.704C9.162 6.68 4 12.736 4 20Z"
></path>
</svg>
<span class="ml-4">VIP</span>
</h3>
<p class="relative mt-5 flex text-3xl tracking-tight text-white">
<span aria-hidden="false" class="transition duration-300">$199</span>
<span aria-hidden="true" class="absolute left-0 top-0 transition duration-300 pointer-events-none -translate-x-6 select-none opacity-0">$1,990</span>
</p>
<p class="mt-3 text-sm text-gray-300">You’ve got a huge amount of assets but it’s not enough. To the moon.</p>
<div class="order-last mt-6">
<ul class="-my-2 divide-y text-sm divide-gray-800 text-gray-300">
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Commission-free trading</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Multi-layered encryption</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Real-time tip notifications</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">No investment limits</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Advanced transaction anonymization</span>
</li>
<li class="flex py-2">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-white">
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
></path>
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></circle>
</svg>
<span class="ml-4">Automated tax-loss harvesting</span>
</li>
</ul>
</div>
<a
class="inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors mt-6"
aria-label="Get started with the VIP plan for [object Object]"
href="/"
>
Purchase Plan
</a>
</section>
</div>
</section>Tailwind pricing ui section of a website is a crucial element that plays a significant role in converting visitors into customers. It needs to be both visually appealing and user-friendly, offering clarity on the different pricing tiers or packages your business provides.
The design of Pricing section should focus on simplicity and ease of comparison, ensuring users can quickly identify the plan that best suits their needs.
Start by highlighting your most popular or recommended plan to guide user decisions. You can achieve this by using distinct colors, badges, or subtle animations.
Each pricing ui card or table should clearly display the key features, benefits, and limitations of the plan, such as storage capacity, user limits, or access to premium features. Using icons or checkmarks to indicate what’s included can make this information more digestible.
Preview
Includes:
- Unlimited placeholder texts
- Consectetur adipiscing elit
- Excepteur sint occaecat cupidatat
- Officia deserunt mollit anim
Most Popular
Includes:
- Unlimited placeholder texts
- Consectetur adipiscing elit
- Excepteur sint occaecat cupidatat
- Officia deserunt mollit anim
- Predefined chunks as necessary
Enterprise
$ 79 /mo
There are many variations available, but the majority have suffered.
Purchase Plan Includes:
- Unlimited placeholder texts
- Consectetur adipiscing elit
- Excepteur sint occaecat cupidatat
- Officia deserunt mollit anim
- Predefined chunks as necessary
- Free from repetition
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0 my-4">
<div>
<div class="flex justify-center max-w-[14rem] mb-8 m-auto">
<div class="relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full">
<span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
<span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out"></span>
</span>
<button
aria-label="yearly plan"
class="relative text-white flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out"
>
Yearly <span>-20%</span>
</button>
<button
aria-label="monthly plan"
class="relative text-white flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out"
>
Monthly
</button>
</div>
</div>
<div class="grid gap-4 lg:gap-6 gap-y-8 md:grid-cols-3 items-start">
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Basic</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">29</span>
<span class="text-slate-200 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-200 mb-5">There are many variations available, but the majority have suffered.</div>
<a
class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150"
href="#0"
>
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-200 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
</ul>
</div>
</div>
<div class="dark h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="absolute top-0 right-0 mr-6 -mt-4">
<div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
</div>
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Advance</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">49</span>
<span class="text-slate-200 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-200 mb-5">There are many variations available, but the majority have suffered.</div>
<a
class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150"
href="#0"
>
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-200 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
</ul>
</div>
</div>
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Enterprise</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">79</span>
<span class="text-slate-200 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-200 mb-5">There are many variations available, but the majority have suffered.</div>
<a
class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150"
href="#0"
>
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-200 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Free from repetition</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Preview
Subscriptions are like having an in-house creative department without the headaches of managing salaried employees.
Most popular
One part-time creative dedicated to your continuous stream of projects.
$6400/ Month
Pause or cancel anytime.
- One dedicated creative, 20 hrs a week
- Unlimited requests
- Unlimited revisions
- Project management
- Access to all services
One part-time creative dedicated to your continuous stream of projects.
$6400/ Month
Pause or cancel anytime.
- One dedicated creative, 20 hrs a week
- Unlimited requests
- Unlimited revisions
- Project management
- Access to all services
Show Code
<div class="max-w-7xl pt-12 pb-36 mx-auto px-4 xl:px-0">
<div class="flex flex-wrap gap-x-6 items-center justify-between">
<label class="uppercase">Plans</label>
<label>(BO® — 04)</label>
<label class="uppercase">ADD-TO-CART CREATIVE</label>
</div>
<p class="text-2xl xl:text-4xl mt-16 max-w-4xl tracking-wide leading-tight">
Subscriptions are like having an in-house creative department without the headaches of managing salaried employees.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 sm:gap-y-4 gap-x-6 mt-24">
<div class="flex relative rounded-md border flex-col">
<span class="bg-black absolute left-8 -top-4 text-white text-sm px-3 py-2 rounded-md inline-flex">Most popular</span>
<div class="px-8 pb-8 pt-16">
<label class="font-medium text-xl">Part time pro</label>
<p class="text-md text-gray-500 mt-4">
One part-time creative dedicated to your continuous stream of projects.
</p>
<p class="mt-12">
<span class="text-3xl font-bold">$6400/</span>
<span class="text-sm">Month</span>
</p>
<p class="text-md text-gray-500 mt-2">Pause or cancel anytime.</p>
<button class="bg-[#131313] w-full mt-12 text-white uppercase py-4 xl:py-6 rounded-md">Subscribe now</button>
</div>
<div class="p-8 rounded-b-md border-t bg-gray-100">
<label class="font-medium">What’s included</label>
<ul class="text-[1rem] mt-4">
<li class="py-1">One dedicated creative, 20 hrs a week</li>
<li class="py-1">Unlimited requests</li>
<li class="py-1">Unlimited revisions</li>
<li class="py-1">Project management</li>
<li class="py-1">Access to all services</li>
</ul>
</div>
</div>
<div class="flex relative rounded-md border flex-col">
<div class="px-8 pb-8 pt-16">
<label class="font-medium text-xl">Part time pro</label>
<p class="text-md text-gray-500 mt-4">
One part-time creative dedicated to your continuous stream of projects.
</p>
<p class="mt-12">
<span class="text-3xl font-bold">$6400/</span>
<span class="text-sm">Month</span>
</p>
<p class="text-md text-gray-500 mt-2">Pause or cancel anytime.</p>
<button class="bg-[#131313] w-full mt-12 text-white uppercase py-4 xl:py-6 rounded-md">Subscribe now</button>
</div>
<div class="p-8 rounded-b-md border-t bg-gray-100">
<label class="font-medium">What’s included</label>
<ul class="text-[1rem] mt-4">
<li class="py-1">One dedicated creative, 20 hrs a week</li>
<li class="py-1">Unlimited requests</li>
<li class="py-1">Unlimited revisions</li>
<li class="py-1">Project management</li>
<li class="py-1">Access to all services</li>
</ul>
</div>
</div>
</div>
</div>900+ Tailwind UI Components
Stay in the loop with everything you need to know.