Have cool product (Not having? believe you have) but not sure how can you sell/ market those pricings. Our developers have designed the best pricing templates, Just tweak the text and you are good to go 💰
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8 bg-sky-300 h-screen">
<div class= p-3">
<div class="flex w-max rounded-2xl border border-red-900 bg-white p-9 pr-11 shadow-md shadow-rose-300">
<div class="p-1">
<p class="mb-3 text-2xl font-semibold text-blue-700">STANDARD</p>
<p class="w-52 font-medium text-green-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam quae repellendus ...</p>
</div>
<div class="relative ml-5 w-40 p-1">
<div class="flex">
<div class="basis-1/4 text-5xl font-semibold text-blue-700">4</div>
<div class="basis-3/4">
<p class="text-2xl font-bold text-blue-700">$</p>
<p class="text-base font-medium text-sky-300">Per Month</p>
</div>
</div>
<button class="absolute bottom-0 mt-auto w-full rounded bg-blue-700 p-4 text-white">Try for free</button>
</div>
</div>
</div>
</div><div class="flex h-full py-6 w-full items-center justify-center bg-sky-300">
<div
class="my-5 w-64 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md"
>
<div class="flex flex-col items-center justify-center p-6 text-center">
<div
class="mt-4 mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-8 w-8 text-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg>
</div>
<h5 class="mb-5 px-4 font-bold tracking-tight text-gray-700">Standard</h5>
<p class="mb-4 px-8 text-sm font-bold text-gray-500">
VK Tailwind Bootsrap
</p>
<div class="mb-3 flex flex-row">
<h3 class="mx-2 text-4xl font-bold text-blue-700">6</h3>
<div class="flex flex-col">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-currency-dollar font-bold text-blue-700"
viewBox="0 0 16 16"
>
<path
d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"
/>
</svg>
<p class="text-xs text-blue-500">Per Month</p>
</div>
</div>
<p class="mb-3 text-sm font-medium text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
consectetur in, soluta illum,...
</p>
<button
class="my-4 rounded bg-blue-600 py-3 px-4 text-sm font-bold text-white hover:bg-blue-700"
>
Try for free
</button>
</div>
</div>
</div><div class="flex h-full w-full items-center justify-center bg-sky-300">
<div
class="flex min-h-screen items-center justify-center overflow-hidden py-6 sm:py-12"
>
<div
class="flex h-[23em] w-[17em] flex-col items-center justify-center gap-5 rounded-xl border-2 border-[#1855CB] bg-teal-200 px-10 text-center shadow-md shadow-white"
>
<p class="text-md font-bold opacity-60">
VK Tailwind Bootsrap Organize across all apps by hand
</p>
<p class="text-3xl font-bold">Free</p>
<p class="text-md opacity-60">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
consectetur in, soluta illum,...
</p>
<div class="flex items-center gap-3">
<p class="font-bold opacity-50">From</p>
<p class="text-3xl font-bold text-[#1855CB]">$1</p>
</div>
</div>
</div>
</div><div
class="flex min-h-screen items-center justify-center overflow-hidden bg-sky-300 py-6 sm:py-12"
>
<!-- Parent -->
<div class="relative">
<!-- Ribbon -->
<div
class="z-2 absolute right-7 -top-7 flex h-20 w-20 items-center justify-center rounded-full bg-[#E77C40] text-xl font-bold text-white"
>
<p>New</p>
</div>
<!-- Card -->
<div
class="z-1 flex h-[33em] w-[17em] flex-col items-center justify-center gap-5 rounded-xl border-2 bg-teal-100 px-5 text-center shadow-lg"
>
<p class="text-3xl font-bold">Free</p>
<p class="text-md font-bold opacity-60">
VK Tailwind Bootsrap Organize across all apps by hand
</p>
<div>
<p class="text-3xl font-bold text-[#1855CB]">$2</p>
<p class="font-bold text-[#1855CB] opacity-50">Per Month</p>
</div>
<button
class="w-full rounded-md bg-[#1855CB] py-3 text-white hover:bg-[#306fee]"
>
Try for free
</button>
<div class="flex flex-col items-start gap-2">
<!-- TICK 1 -->
<div class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#3DBB77"
class="h-7 w-7"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<p class="text-start text-xs">Unlimited product updates</p>
</div>
<!-- TICK 2 -->
<div class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#3DBB77"
class="h-7 w-7"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<p class="text-start text-xs">Unlimited product updates</p>
</div>
<!-- TICK 3 -->
<div class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#3DBB77"
class="h-7 w-7"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<p class="text-start text-xs">Unlimited product updates</p>
</div>
<!-- TICK 4 -->
<div class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#BDBDBD"
class="h-7 w-7"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<p class="text-start text-xs">1GB Cloud Storage</p>
</div>
<!-- TICK 5 -->
<div class="flex items-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#BDBDBD"
class="h-7 w-7"
>
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
<p class="flex-wrap text-start text-xs">Email & Community support</p>
</div>
</div>
</div>
</div>
</div><div class="bg-white dark:bg-slate-300 ">
<div class="container px-6 py-8 mx-auto h-screen">
<div class="flex flex-col items-center justify-center md:items-end md:flex-row">
<div class="w-full px-6 py-4 transition-colors duration-300 transform rounded-lg md:mx-5 md:w-96 bg-gray-50 dark:bg-white">
<div class="text-center">
<p class="text-4xl font-bold text-gray-800 dark:text-slate-700">
Free
</p>
<p class="mt-4 text-slate-700 dark:text-slate-700 font-semibold">
Organize across all apps by hands
</p>
<div class="flex flex-row gap-1 items justify-center">
<h4 class="mt-2 text-5xl font-semibold text-blue-500 dark:text-blue-500">
0
</h4>
<span class="text-blue-500 text-4xl"> $ </span>
<p class="mt-8 text-slate-700 font-semibold dark:text-blue-300">
per month
</p>
</div>
</div>
<ul role="list" class="my-10 space-y-5">
<li class="flex space-x-3">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
Unlimited Product Updates
</span>
</li>
<li class="flex space-x-3">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
API Access
</span>
</li>
<li class="flex space-x-3">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
Integration help
</span>
</li>
<li class="flex space-x-3 ">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500">
1GB Cloud Storage
</span>
</li>
<li class="flex space-x-3 ">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500">
Email and Community Support
</span>
</li>
<li class="flex space-x-3 ">
<svg
aria-hidden="true"
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Check icon</title>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="text-xl font-normal leading-tight text-gray-500">
Complete documentation
</span>
</li>
</ul>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-green-600">
Try for free
</button>
</div>
</div>
</div>
</div>