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 Compare Table
pricingPresents a clear comparison of different pricing plans and their respective features in a tabular layout.
Compare Plans
Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage.
| Features | Free | Pro | Enterprise |
|---|---|---|---|
| Price | $0 | $49/month | Custom |
| Team members | Up to 3 | Up to 20 | Unlimited |
| Storage | 10 GB | 100 GB | Unlimited |
| API Access | |||
| Custom Domain | |||
| Analytics | Basic | Advanced | Custom |
| Support | Community | Priority | Dedicated |
| Start Free | Upgrade | Contact Us |
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="mb-12 text-center">
<h2 class="mb-4 text-3xl font-bold lg:text-6xl">Compare Plans</h2>
<p class="mx-auto max-w-2xl text-lg">
Find the perfect plan for your team. All plans include unlimited
projects and secure cloud storage.
</p>
</div>
<div class="overflow-x-auto rounded-lg border">
<table class="w-full min-w-max">
<thead>
<tr class="bg-neutral-100">
<th class="p-4 text-left">Features</th>
<th class="p-4 text-center">Free</th>
<th class="p-4 text-center">Pro</th>
<th class="p-4 text-center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="border-t">
<td class="p-4 font-semibold">Price</td>
<td class="p-4 text-center">$0</td>
<td class="p-4 text-center">$49/month</td>
<td class="p-4 text-center">Custom</td>
</tr>
<tr class="border-t bg-neutral-50">
<td class="p-4">Team members</td>
<td class="p-4 text-center">Up to 3</td>
<td class="p-4 text-center">Up to 20</td>
<td class="p-4 text-center">Unlimited</td>
</tr>
<tr class="border-t">
<td class="p-4">Storage</td>
<td class="p-4 text-center">10 GB</td>
<td class="p-4 text-center">100 GB</td>
<td class="p-4 text-center">Unlimited</td>
</tr>
<tr class="border-t bg-neutral-50">
<td class="p-4">API Access</td>
<td class="p-4 text-center">
<i class="fas fa-times text-red-500"></i>
</td>
<td class="p-4 text-center">
<i class="fas fa-check text-green-500"></i>
</td>
<td class="p-4 text-center">
<i class="fas fa-check text-green-500"></i>
</td>
</tr>
<tr class="border-t">
<td class="p-4">Custom Domain</td>
<td class="p-4 text-center">
<i class="fas fa-times text-red-500"></i>
</td>
<td class="p-4 text-center">
<i class="fas fa-check text-green-500"></i>
</td>
<td class="p-4 text-center">
<i class="fas fa-check text-green-500"></i>
</td>
</tr>
<tr class="border-t bg-neutral-50">
<td class="p-4">Analytics</td>
<td class="p-4 text-center">Basic</td>
<td class="p-4 text-center">Advanced</td>
<td class="p-4 text-center">Custom</td>
</tr>
<tr class="border-t">
<td class="p-4">Support</td>
<td class="p-4 text-center">Community</td>
<td class="p-4 text-center">Priority</td>
<td class="p-4 text-center">Dedicated</td>
</tr>
<tr class="border-t bg-neutral-50">
<td class="p-4"></td>
<td class="p-4 text-center">
<a
href="#"
class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Start Free</a
>
</td>
<td class="p-4 text-center">
<a
href="#"
class="inline-block rounded-lg bg-blue-600 px-6 py-2 font-semibold text-white hover:bg-blue-700"
>Upgrade</a
>
</td>
<td class="p-4 text-center">
<a
href="#"
class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Contact Us</a
>
</td>
</tr>
</tbody>
</table>
</div>
</section>Compare Plans
Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage.
| Features | Free | Pro | Enterprise |
|---|---|---|---|
| Price | $0 | $49/month | Custom |
| Team members | Up to 3 | Up to 20 | Unlimited |
| Storage | 10 GB | 100 GB | Unlimited |
| API Access | |||
| Custom Domain | |||
| Analytics | Basic | Advanced | Custom |
| Support | Community | Priority | Dedicated |
| Start Free | Upgrade | Contact Us |
<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">
<div space="m-b:big" visual="text:center">
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega">Compare Plans</h2>
<p space="m-x:auto max-w:[2xl]" visual="text-size:large">
Find the perfect plan for your team. All plans include unlimited
projects and secure cloud storage.
</p>
</div>
<div visual="rounded:medium border-w:thin" class="overflow-x-auto">
<table space="w:[100%] min-w:[max-content]">
<thead>
<tr visual="bg:neutral-100">
<th space="p:medium" visual="text:left">Features</th>
<th space="p:medium" visual="text:center">Free</th>
<th space="p:medium" visual="text:center">Pro</th>
<th space="p:medium" visual="text:center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="border-t">
<td space="p:medium" visual="font:tw-semibold">Price</td>
<td space="p:medium" visual="text:center">$0</td>
<td space="p:medium" visual="text:center">$49/month</td>
<td space="p:medium" visual="text:center">Custom</td>
</tr>
<tr visual="bg:neutral-50" class="border-t">
<td space="p:medium">Team members</td>
<td space="p:medium" visual="text:center">Up to 3</td>
<td space="p:medium" visual="text:center">Up to 20</td>
<td space="p:medium" visual="text:center">Unlimited</td>
</tr>
<tr class="border-t">
<td space="p:medium">Storage</td>
<td space="p:medium" visual="text:center">10 GB</td>
<td space="p:medium" visual="text:center">100 GB</td>
<td space="p:medium" visual="text:center">Unlimited</td>
</tr>
<tr visual="bg:neutral-50" class="border-t">
<td space="p:medium">API Access</td>
<td space="p:medium" visual="text:center">
<i visual="text:red-500" class="fas fa-times"></i>
</td>
<td space="p:medium" visual="text:center">
<i visual="text:green-500" class="fas fa-check"></i>
</td>
<td space="p:medium" visual="text:center">
<i visual="text:green-500" class="fas fa-check"></i>
</td>
</tr>
<tr class="border-t">
<td space="p:medium">Custom Domain</td>
<td space="p:medium" visual="text:center">
<i visual="text:red-500" class="fas fa-times"></i>
</td>
<td space="p:medium" visual="text:center">
<i visual="text:green-500" class="fas fa-check"></i>
</td>
<td space="p:medium" visual="text:center">
<i visual="text:green-500" class="fas fa-check"></i>
</td>
</tr>
<tr visual="bg:neutral-50" class="border-t">
<td space="p:medium">Analytics</td>
<td space="p:medium" visual="text:center">Basic</td>
<td space="p:medium" visual="text:center">Advanced</td>
<td space="p:medium" visual="text:center">Custom</td>
</tr>
<tr class="border-t">
<td space="p:medium">Support</td>
<td space="p:medium" visual="text:center">Community</td>
<td space="p:medium" visual="text:center">Priority</td>
<td space="p:medium" visual="text:center">Dedicated</td>
</tr>
<tr visual="bg:neutral-50" class="border-t">
<td space="p:medium"></td>
<td space="p:medium" visual="text:center">
<a
href="#"
layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Start Free</a
>
</td>
<td space="p:medium" visual="text:center">
<a
href="#"
layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700"
>Upgrade</a
>
</td>
<td space="p:medium" visual="text:center">
<a
href="#"
layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Contact Us</a
>
</td>
</tr>
</tbody>
</table>
</div>
</section>