BASIC-LIBRARY / SECTION / PRICING
Pricing One
Plans & Billing
Choose the right solution for your team’s size, budget, and goals.
START
Free
Ideal for personal use or trying out the platform.
POPULAR
All Free features included
Multiple project management
10GB of cloud storage
Priority email support
PRO
$38 /mo
Best for individuals and small teams ready to grow.
BUSINESS
$56 /mo
Designed for growing teams with multiple collaborators.
SPECIAL
$72 /mo
Perfect for enterprises with tailored needs.
@import url("/template/basic-library/section/pricing/pricing-one/raw/styles.css");
<section class="body-font overflow-hidden text-gray-600">
<div
class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto max-w-screen-2xl"
>
<div class="flex flex-col text-center w-full mb-20">
<h1
class="title-font text-3xl font-medium mb-2 text-gray-900 sm:text-4xl"
>
Plans & Billing
</h1>
<p
class="ml-auto mr-auto mx-auto leading-relaxed text-base text-gray-500 lg:w-2/3"
>
Choose the right solution for your team’s size, budget, and
goals.
</p>
<div
class="overflow-hidden flex ml-auto mr-auto mx-auto border-2 border-indigo-500 rounded mt-6"
>
<button
class="pt-1 pb-1 py-1 pl-4 pr-4 px-4 bg-indigo-500 text-white focus:outline-none"
>
Monthly
</button>
<button class="pt-1 pb-1 py-1 pl-4 pr-4 px-4 focus:outline-none">
Annually
</button>
</div>
</div>
<div class="-m-4 flex flex-wrap">
<div class="pt-4 pr-4 pb-4 pl-4 w-full md:w-1/2 xl:w-1/4">
<div
class="relative overflow-hidden h-full pt-6 pr-6 pb-6 pl-6 rounded-lg border-2 border-gray-300 flex flex-col"
>
<h2 class="tracking-widest title-font text-sm mb-1 font-medium">
START
</h2>
<h1
class="text-5xl text-gray-900 pb-4 mb-4 border-b border-gray-200 leading-none"
>
Free
</h1>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Access to basic analytics
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Single user workspace
</span>
</div>
<div class="flex items-center text-gray-600 mb-6">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Community support only
</span>
</div>
<button
class="flex items-center mt-auto text-white bg-gray-400 border-0 pt-2 pb-2 py-2 pl-4 pr-4 px-4 w-full focus:outline-none rounded hover:bg-gray-500"
>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Get Started
</span>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<p class="text-xs text-gray-500 mt-3">
Ideal for personal use or trying out the platform.
</p>
</div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4 w-full md:w-1/2 xl:w-1/4">
<div
class="relative overflow-hidden h-full pt-6 pr-6 pb-6 pl-6 rounded-lg border-2 border-indigo-500 flex flex-col"
>
<span
class="tracking-widest right-0 top-0 bg-indigo-500 text-white pl-3 pr-3 px-3 pt-1 pb-1 py-1 text-xs absolute rounded-bl"
>
POPULAR
</span>
<h2 class="tracking-widest title-font text-sm mb-1 font-medium">
PRO
</h2>
<h1
class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200"
>
<span>$38</span>
<span class="text-lg ml-1 font-normal text-gray-500">/mo</span>
</h1>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
All Free features included
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Multiple project management
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
10GB of cloud storage
</span>
</div>
<div class="flex items-center text-gray-600 mb-6">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Priority email support
</span>
</div>
<button
class="flex items-center mt-auto text-white bg-indigo-500 border-0 pt-2 pb-2 py-2 pl-4 pr-4 px-4 w-full focus:outline-none rounded hover:bg-indigo-600"
>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Choose Plan
</span>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<p class="text-xs text-gray-500 mt-3">
Best for individuals and small teams ready to grow.
</p>
</div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4 w-full md:w-1/2 xl:w-1/4">
<div
class="relative overflow-hidden h-full pt-6 pr-6 pb-6 pl-6 rounded-lg border-2 border-gray-300 flex flex-col"
>
<h2 class="tracking-widest title-font text-sm mb-1 font-medium">
BUSINESS
</h2>
<h1
class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200"
>
<span>$56</span>
<span class="text-lg ml-1 font-normal text-gray-500">/mo</span>
</h1>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Team collaboration tools
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Advanced analytics dashboard
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
50GB cloud storage
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Role-based access control
</span>
</div>
<div class="flex items-center text-gray-600 mb-6">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Phone and chat support
</span>
</div>
<button
class="flex items-center mt-auto text-white bg-gray-400 border-0 pt-2 pb-2 py-2 pl-4 pr-4 px-4 w-full focus:outline-none rounded hover:bg-gray-500"
>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Subscribe
</span>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<p class="text-xs text-gray-500 mt-3">
Designed for growing teams with multiple collaborators.
</p>
</div>
</div>
<div class="pt-4 pr-4 pb-4 pl-4 w-full md:w-1/2 xl:w-1/4">
<div
class="relative overflow-hidden h-full pt-6 pr-6 pb-6 pl-6 rounded-lg border-2 border-gray-300 flex flex-col"
>
<h2 class="tracking-widest title-font text-sm mb-1 font-medium">
SPECIAL
</h2>
<h1
class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200"
>
<span>$72</span>
<span class="text-lg ml-1 font-normal text-gray-500">/mo</span>
</h1>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
All Business features
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Custom domain support
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
White-label features
</span>
</div>
<div class="flex items-center text-gray-600 mb-2">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
SLA and uptime guarantee
</span>
</div>
<div class="flex items-center text-gray-600 mb-6">
<div
class="inline-flex flex-shrink-0 w-4 h-4 mr-2 items-center justify-center bg-gray-400 text-white rounded-full"
>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Dedicated account manager
</span>
</div>
<button
class="flex items-center mt-auto text-white bg-gray-400 border-0 pt-2 pb-2 py-2 pl-4 pr-4 px-4 w-full focus:outline-none rounded hover:bg-gray-500"
>
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Contact Us
</span>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<p class="text-xs text-gray-500 mt-3">
Perfect for enterprises with tailored needs.
</p>
</div>
</div>
</div>
</div>
</section>
© 2025 tailsections.com. All rights reserved