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 💰
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<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">
<div class="p-3 bg-green-500 w-fit">
<div class="border rounded-2xl w-max border-cyan-500 p-9 pr-11 flex bg-white">
<div class=" p-1">
<p class="text-2xl text-blue-700 font-semibold mb-3">STANDARD</p>
<p class="w-52 text-green-300 font-medium">
Most calenders are designed for teams. State is designed for
freelancers who want a simple way
</p>
</div>
<div class="p-1 ml-5 w-40 relative">
<div class="flex">
<div class="basis-1/4 text-blue-700 text-5xl font-semibold">
0
</div>
<div class="basis-3/4">
<p class="text-2xl font-bold text-blue-700">$</p>
<p class="font-medium text-base text-sky-300">Per Month</p>
</div>
</div>
<button class="w-full bg-blue-700 text-white rounded p-4 mt-auto absolute bottom-0">
Try for free
</button>
</div>
</div>
</div>
</div>
<div class="flex h-full w-full items-center justify-center bg-slate-800">
<div class="my-10 w-64 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md">
<a href="#"> </a>
<div class="flex flex-col items-center justify-center p-6 text-center">
<a href="#"> </a>
<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">
Organize across all apps by hand
</p>
<div class="mb-3 flex flex-row">
<h3 class="mx-2 text-4xl font-bold text-blue-700">0</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-normal text-gray-700">
Slate helps you see how many more days you need to work to reach you
financial goal for the month and year.
</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 min-h-screen items-center justify-center overflow-hidden py-6 sm:py-12">
<!-- Card -->
<div class="h-[23em] w-[17em] flex flex-col gap-5 justify-center items-center text-center rounded-xl px-10 border-2 border-[#1855CB] shadow-lg">
<p class="font-bold text-md opacity-60">Organize across all apps by hand</p>
<p class="font-bold text-3xl">Free</p>
<p class="text-md opacity-60">State helps you see how many more days you need to work to reach your financial goal for the month & year.</p>
<div class="flex gap-3 items-center">
<p class="font-bold opacity-50">From</p>
<p class="text-3xl font-bold text-[#1855CB]">$1</p>
</div>
</div>
</div>
<div class="flex min-h-screen items-center justify-center overflow-hidden 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 px-5 text-center shadow-lg">
<p class="text-3xl font-bold">Free</p>
<p class="text-md font-bold opacity-60">Organize across all apps by hand</p>
<div>
<p class="text-3xl font-bold text-[#1855CB]">$19</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>