Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Pricing Toggle Cards
pricingOffers pricing plans in card format with an interactive toggle for monthly/annual views and savings display.
Pricing
Choose Your Perfect Plan
Select the plan that best suits your needs. All plans include our core features with different usage limits.
Monthly
Annual
Save 20%
MOST POPULAR
Pro
Best for growing teams
/month
- Up to 20 users
- Advanced analytics
- Priority support
- Custom integrations
Enterprise
For large organizations
/month
- Unlimited users
- Custom analytics
- Dedicated support
- Advanced security
<section
class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"
x-data="{ annual: false }"
>
<div class="text-center">
<div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
<p class="text-sm font-bold uppercase text-white">Pricing</p>
</div>
<h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl">
Choose Your Perfect Plan
</h2>
<p class="mx-auto mb-8 max-w-2xl text-lg lg:text-xl">
Select the plan that best suits your needs. All plans include our core
features with different usage limits.
</p>
<div class="mb-8 flex items-center justify-center gap-4">
<span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span>
<button
@click="annual = !annual"
class="relative h-8 w-16 rounded-full bg-blue-600 transition-colors"
:class="{ 'bg-blue-400': !annual }"
>
<span
class="absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition-transform"
:class="{ 'translate-x-8': annual }"
>
</span>
</button>
<span :class="{ 'text-blue-600 font-bold': annual }">Annual</span>
<span
class="rounded-full bg-green-100 px-3 py-1 text-sm text-green-600"
>Save 20%</span
>
</div>
<div class="grid gap-8 lg:grid-cols-3">
<!-- Starter Plan -->
<div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
<h3 class="mb-2 text-2xl font-bold">Starter</h3>
<p class="mb-6">Perfect for small businesses</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$190' : '$19'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Up to 5 users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Basic analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>24/7 support</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Get Started</a
>
</div>
<!-- Pro Plan -->
<div
class="flex flex-col rounded-lg border-2 border-blue-600 bg-blue-50 p-8"
>
<div
class="mb-4 -mt-12 rounded-full bg-blue-600 px-4 py-1 text-center text-sm font-bold text-white"
>
MOST POPULAR
</div>
<h3 class="mb-2 text-2xl font-bold">Pro</h3>
<p class="mb-6">Best for growing teams</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$490' : '$49'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Up to 20 users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Advanced analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Priority support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg bg-blue-600 font-semibold text-white hover:bg-blue-700"
>Get Started</a
>
</div>
<!-- Enterprise Plan -->
<div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
<h3 class="mb-2 text-2xl font-bold">Enterprise</h3>
<p class="mb-6">For large organizations</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$990' : '$99'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Unlimited users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Custom analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Dedicated support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Advanced security</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Contact Sales</a
>
</div>
</div>
</div>
</section>Pricing
Choose Your Perfect Plan
Select the plan that best suits your needs. All plans include our core features with different usage limits.
Monthly
Annual
Save 20%
MOST POPULAR
Pro
Best for growing teams
/month
- Up to 20 users
- Advanced analytics
- Priority support
- Custom integrations
Enterprise
For large organizations
/month
- Unlimited users
- Custom analytics
- Dedicated support
- Advanced security
<section
layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x"
x-data="{ annual: false }"
>
<div visual="text:center">
<div space="m-x:auto m-b:small w:[min-content] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600">
<p visual="text-size:small font:tw-bold uppercase text:white">Pricing</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">
Choose Your Perfect Plan
</h2>
<p space="m-x:auto m-b:large max-w:[2xl]" visual="text-size:large tw-lg:text-size:big">
Select the plan that best suits your needs. All plans include our core
features with different usage limits.
</p>
<div layout="flex items:center justify:center" space="m-b:large g:medium">
<span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span>
<button
@click="annual = !annual"
layout="relative" space="h:large w:big-3x" visual="rounded:round bg:blue-600 transition:colors"
:class="{ 'bg-blue-400': !annual }"
>
<span
layout="absolute left:tiny top:tiny" space="h:medium-3x w:medium-3x" visual="rounded:round bg:white transition:transform"
:class="{ 'translate-x-8': annual }"
>
</span>
</button>
<span :class="{ 'text-blue-600 font-bold': annual }">Annual</span>
<span
space="p-x:small-3x p-y:tiny" visual="rounded:round bg:green-100 text-size:small text:green-600"
>Save 20%</span
>
</div>
<div layout="grid tw-lg:grid-cols:3" space="g:large">
<!-- Starter Plan -->
<div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200">
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Starter</h3>
<p space="m-b:medium-3x">Perfect for small businesses</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$190' : '$19'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Up to 5 users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Basic analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>24/7 support</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Get Started</a
>
</div>
<!-- Pro Plan -->
<div
layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:blue-600 bg:blue-50"
>
<div
space="m-b:medium m-t:[-big] p-x:medium p-y:tiny" visual="rounded:round bg:blue-600 text:center text-size:small font:tw-bold text:white"
>
MOST POPULAR
</div>
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Pro</h3>
<p space="m-b:medium-3x">Best for growing teams</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$490' : '$49'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Up to 20 users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Advanced analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Priority support</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700"
>Get Started</a
>
</div>
<!-- Enterprise Plan -->
<div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200">
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Enterprise</h3>
<p space="m-b:medium-3x">For large organizations</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$990' : '$99'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Unlimited users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Custom analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Dedicated support</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Advanced security</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Contact Sales</a
>
</div>
</div>
</div>
</section>