Simple Pricing to Level Up Using Tailwind UI
Simple Pricing to Level Up, elegantly designed using Tailwind CSS, offers straightforward and transparent pricing plans for an enhanced user experience.
pricing
Loading component...
287 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>
<!-- design inspired by https://doublemakers.co/design-subscription/?ref=land-book.com -->
<div class="w-full h-full p-12 bg-black sm:p-24">
<div class="container px-4 py-8 mx-auto bg-white">
<div class="xl:items-center xl:-mx-8 xl:flex">
<div class="flex-1 xl:mx-8">
<div
class="md:flex space-x-0 md:items-center md:justify-center divide-y-[1px] sm:divide-y-0 sm:divide-x-[1px] divide-gray-600">
<div class="max-w-sm mx-auto md:mx-4">
<div class="p-6">
<div class="flex space-x-4">
<h1 class="text-xl font-medium text-gray-700 capitalize lg:text-2xl dark:text-white">Standard</h1>
<span class="flex items-center px-2 py-1 text-xs font-medium bg-yellow-500 rounded-lg ">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M14 4.4375C15.3462 4.4375 16.4375 3.34619 16.4375 2H17.5625C17.5625 3.34619 18.6538 4.4375 20 4.4375V5.5625C18.6538 5.5625 17.5625 6.65381 17.5625 8H16.4375C16.4375 6.65381 15.3462 5.5625 14 5.5625V4.4375ZM1 11C4.31371 11 7 8.31371 7 5H9C9 8.31371 11.6863 11 15 11V13C11.6863 13 9 15.6863 9 19H7C7 15.6863 4.31371 13 1 13V11ZM17.25 14C17.25 15.7949 15.7949 17.25 14 17.25V18.75C15.7949 18.75 17.25 20.2051 17.25 22H18.75C18.75 20.2051 20.2051 18.75 22 18.75V17.25C20.2051 17.25 18.75 15.7949 18.75 14H17.25Z">
</path>
</svg>
Most Popular
</span>
</div>
<p class="mt-4 mb-8 text-gray-500 dark:text-gray-300">
One request at a time. For companies who need on-going design support.
</p>
<span class="text-base font-medium text-red-500 line-through sm:text-lg dark:text-red-200">$3,525</span>
<h2 class="mt-2 text-2xl font-semibold text-gray-700 sm:text-3xl dark:text-gray-300">$2,995/m <span
class="text-base font-medium">USD</span></h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Pause or cancel anytime
</p>
<button type="button"
class="w-full inline-flex mb-2 items-center justify-center text-gray-100 font-medium leading-none mt-8 bg-black rounded-lg py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150 hover:text-white hover:bg-gray-900 text-sm sm:text-base">
Start 3-days free trials
</button>
<button
class="block w-full py-3 text-sm font-medium text-black duration-100 ease-in-out bg-white border border-black rounded-lg sm:text-base hover:bg-black focus:outline-none hover:text-white">
Book a call
</button>
</div>
<div class="p-6">
<div class="space-y-2 divide-y divide-black">
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">1x active task at a time</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Unlimited revisions</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Dedicated project manager</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">
Daily comms through Slack</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Work with senior designers</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">2-3 days turn around time</span>
</div>
</div>
</div>
</div>
<div class="max-w-sm mx-auto md:mx-4">
<div class="p-6">
<div class="flex space-x-4">
<h1 class="text-xl font-medium text-gray-700 capitalize lg:text-2xl dark:text-white">Growth</h1>
<span class="flex items-center px-2 py-1 text-xs font-medium bg-indigo-200 rounded-lg ">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853Z">
</path>
</svg>
Best value
</span>
</div>
<p class="mt-4 mb-8 text-gray-500 dark:text-gray-300">
Double the requests. For companies with increasing design needs. Limited spots.
</p>
<span class="text-base font-medium text-red-500 line-through sm:text-lg dark:text-red-200">$5,205</span>
<h2 class="mt-2 text-2xl font-semibold text-gray-700 sm:text-3xl dark:text-gray-300">$4,255/m <span
class="text-base font-medium">USD</span></h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Pause or cancel anytime
</p>
<button type="button"
class="w-full inline-flex mb-2 items-center justify-center text-gray-100 font-medium leading-none mt-8 bg-black rounded-lg py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150 hover:text-white hover:bg-gray-900 text-sm sm:text-base">
Start 3-days free trials
</button>
<button
class="block w-full py-3 text-sm font-medium text-black duration-100 ease-in-out bg-white border border-black rounded-lg sm:text-base hover:bg-black focus:outline-none hover:text-white">
Book a call
</button>
</div>
<div class="p-6">
<div class="space-y-2 divide-y divide-black">
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg font-bold text-gray-800 dark:text-gray-300">2x active task at a time</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Unlimited revisions</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Dedicated project manager</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">
Daily comms through Slack</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Work with senior designers</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">2-3 days turn around time</span>
</div>
</div>
</div>
</div>
<div class="max-w-sm mx-auto md:mx-4">
<div class="p-6">
<div class="flex space-x-4">
<h1 class="text-xl font-medium text-gray-700 capitalize lg:text-2xl dark:text-white">Basic - Weekly</h1>
</div>
<p class="mt-4 mb-8 text-gray-500 dark:text-gray-300">
Perfect if you want to try the subscription out or only have a few one-off tasks.
</p>
<span class="text-base font-medium text-red-500 line-through sm:text-lg dark:text-red-200">$3,525</span>
<h2 class="mt-2 text-2xl font-semibold text-gray-700 sm:text-3xl dark:text-gray-300">$890/w <span
class="text-base font-medium">USD</span></h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Paid per weekly
</p>
<button type="button"
class="w-full inline-flex mb-2 items-center justify-center text-gray-100 font-medium leading-none mt-8 bg-black rounded-lg py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150 hover:text-white hover:bg-gray-900 text-sm sm:text-base">
Enquire
</button>
<button
class="block w-full py-3 text-sm font-medium text-black duration-100 ease-in-out bg-white border border-black rounded-lg sm:text-base hover:bg-black focus:outline-none hover:text-white">
Book a FREE call
</button>
</div>
<div class="p-6">
<div class="space-y-2 divide-y divide-black">
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">
Fixed Scope of work</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">2 round of revisions</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">Dedicated project manager</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">
Daily comms through Slack</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">1x designer</span>
</div>
<div class="flex items-center py-2">
<svg class="w-6 h-6" 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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="mx-4 text-lg text-gray-800 dark:text-gray-300">2-7 days turn around time</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>