Pricing Tables
- Default pricing cards
- Tabs selector pricing cards
- Horizontal pricing card
- Feature list description with pricing card
- Comparison table
- Highlighted pricing plan
- Pricing plan with toggle switch
Get started with a collection of responsive pricing sections to show the pricing plan to your potential customers based on multiple sizes, styles, and layouts.
Default pricing cards
Use this example of three pricing cards showcasing the pricing plan title, description, feature list, and CTA button.
Default pricing cards
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div
class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0"
>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white"
>
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
Best option for personal use & for your next project.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white"
>
<h3 class="mb-4 text-2xl font-semibold">Company</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
Relevant for multiple users, extended & premium support.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$99</span>
<span class="text-gray-500 dark:text-gray-400" dark:text-gray-400
>/month</span
>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">10 developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">24 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">24 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white"
>
<h3 class="mb-4 text-2xl font-semibold">Enterprise</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
Best for large scale uses and extended redistribution rights.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$499</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size:
<span class="font-semibold">100+ developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">36 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">36 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
>Get started</a
>
</div>
</div>
</div>
</section>
<!-- Block end -->Tabs selector pricing cards
Use this advanced example to show the pricing plan based on which tab is being activated by the website visitor based on the Tabs component from the Flowbite library.
Tabs selector pricing cards
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<!-- Pricing Card -->
<div
class="bg-white rounded-lg divide-y divide-gray-200 shadow dark:divide-gray-700 lg:divide-y-0 lg:divide-x lg:grid lg:grid-cols-3 dark:bg-gray-800"
>
<div class="col-span-2 p-6 lg:p-8">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
Choose a pricing plan:
</h3>
<ul
class="grid grid-cols-2 text-sm font-medium text-center text-gray-500 shadow md:rounded-lg md:grid-cols-4 dark:divide-gray-600 dark:text-gray-400"
role="tablist"
>
<li class="w-full" role="presentation">
<button
id="starter-tab"
type="button"
class="inline-block p-4 w-full border border-gray-200 dark:border-gray-500 md:rounded-l-lg"
>
Starter
</button>
</li>
<li class="w-full" role="presentation">
<button
id="standard-tab"
type="button"
class="inline-block p-4 w-full border dark:border-gray-500 border-gray-200"
>
Standard
</button>
</li>
<li class="w-full" role="presentation">
<button
id="premium-tab"
type="button"
class="inline-block p-4 w-full border dark:border-gray-500 border-gray-200"
>
Premium
</button>
</li>
<li class="w-full" role="presentation">
<button
id="enterprise-tab"
type="button"
class="inline-block p-4 w-full border border-gray-200 dark:border-gray-500 md:rounded-r-lg"
>
Enterprise
</button>
</li>
</ul>
<div id="starter-content" class="hidden">
<div class="mt-6 mb-2 font-medium text-gray-900 dark:text-white">
Starter details:
</div>
<p class="text-lg font-light text-gray-500 dark:text-gray-400">
Plan pricing starts at 250 contacts. Select your audience size to
calculate your price. The monthly email send limit for Standard
plans is 12 times your maximum contact count.*.
</p>
</div>
<div id="standard-content" class="hidden">
<div class="mt-6 mb-2 font-medium text-gray-900 dark:text-white">
Standard details:
</div>
<p class="text-lg font-light text-gray-500 dark:text-gray-400">
Plan pricing starts at 500 contacts. Select your audience size to
calculate your price. The monthly email send limit for Standard
plans is 12 times your maximum contact count.*.
</p>
</div>
<div id="premium-content" class="hidden">
<div class="mt-6 mb-2 font-medium text-gray-900 dark:text-white">
Premium details:
</div>
<p class="text-lg font-light text-gray-500 dark:text-gray-400">
Plan pricing starts at 1000 contacts. Select your audience size to
calculate your price. The monthly email send limit for Standard
plans is 12 times your maximum contact count.*.
</p>
</div>
<div id="enterprise-content" class="hidden">
<div class="mt-6 mb-2 font-medium text-gray-900 dark:text-white">
Enterprise details:
</div>
<p class="text-lg font-light text-gray-500 dark:text-gray-400">
Plan pricing starts at unlimited contacts. Select your audience size
to calculate your price. The monthly email send limit for Standard
plans is 12 times your maximum contact count.*.
</p>
</div>
</div>
<div class="flex p-6 lg:p-8">
<div id="starter-plan" class="hidden self-center w-full">
<div
class="mb-4 text-2xl font-semibold text-gray-900 dark:text-white"
>
Starter plan
</div>
<div class="font-light text-gray-500 dark:text-gray-400">
Starts at
</div>
<div
class="mb-4 text-5xl font-extrabold text-gray-900 dark:text-white"
>
$49
</div>
<a
href="#"
class="flex justify-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-bue-200 dark:focus:ring-primary-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-4"
>Buy now</a
>
<a
href="#"
class="flex items-center mb-4 font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500"
>
View team pricing
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
*To see the monthly email send limit included with your specific
plan, click Calculate my price. If your plan's contact or email send
limit is exceeded, you will be charged for overages.
</p>
</div>
<div id="standard-plan" class="hidden self-center w-full">
<div
class="mb-4 text-2xl font-semibold text-gray-900 dark:text-white"
>
Standard plan
</div>
<div class="font-light text-gray-500 dark:text-gray-400">
Starts at
</div>
<div
class="mb-4 text-5xl font-extrabold text-gray-900 dark:text-white"
>
$99
</div>
<a
href="#"
class="flex justify-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-bue-200 dark:focus:ring-primary-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-4"
>Buy now</a
>
<a
href="#"
class="flex items-center mb-4 font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500"
>
View team pricing
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
*To see the monthly email send limit included with your specific
plan, click Calculate my price. If your plan's contact or email send
limit is exceeded, you will be charged for overages.
</p>
</div>
<div id="premium-plan" class="hidden self-center w-full">
<div
class="mb-4 text-2xl font-semibold text-gray-900 dark:text-white"
>
Premium plan
</div>
<div class="font-light text-gray-500 dark:text-gray-400">
Starts at
</div>
<div
class="mb-4 text-5xl font-extrabold text-gray-900 dark:text-white"
>
$149
</div>
<a
href="#"
class="flex justify-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-bue-200 dark:focus:ring-primary-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-4"
>Buy now</a
>
<a
href="#"
class="flex items-center mb-4 font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500"
>
View team pricing
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
*To see the monthly email send limit included with your specific
plan, click Calculate my price. If your plan's contact or email send
limit is exceeded, you will be charged for overages.
</p>
</div>
<div id="enterprise-plan" class="hidden self-center w-full">
<div
class="mb-4 text-2xl font-semibold text-gray-900 dark:text-white"
>
Enterprise plan
</div>
<div class="font-light text-gray-500 dark:text-gray-400">
Starts at
</div>
<div
class="mb-4 text-5xl font-extrabold text-gray-900 dark:text-white"
>
$249
</div>
<a
href="#"
class="flex justify-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-bue-200 dark:focus:ring-primary-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center mb-4"
>Buy now</a
>
<a
href="#"
class="flex items-center mb-4 font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500"
>
View team pricing
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
*To see the monthly email send limit included with your specific
plan, click Calculate my price. If your plan's contact or email send
limit is exceeded, you will be charged for overages.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Block end -->
<script>
const pricingTabEls = [
{
id: 'starter',
triggerEl: document.querySelector('#starter-tab'),
targetEl: document.querySelector('#starter-content'),
pricingEl: document.querySelector('#starter-plan'),
},
{
id: 'standard',
triggerEl: document.querySelector('#standard-tab'),
targetEl: document.querySelector('#standard-content'),
pricingEl: document.querySelector('#standard-plan'),
},
{
id: 'premium',
triggerEl: document.querySelector('#premium-tab'),
targetEl: document.querySelector('#premium-content'),
pricingEl: document.querySelector('#premium-plan'),
},
{
id: 'enterprise',
triggerEl: document.querySelector('#enterprise-tab'),
targetEl: document.querySelector('#enterprise-content'),
pricingEl: document.querySelector('#enterprise-plan'),
},
]
const options = {
defaultTabId: 'standard',
activeClasses: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-white',
inactiveClasses:
'bg-white hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600',
onShow(context) {
const activeTab = context.getActiveTab()
pricingTabEls.map(function (el) {
el.pricingEl.classList.add('hidden')
})
activeTab.pricingEl.classList.remove('hidden')
},
}
const pricingTabs = new Tabs(pricingTabEls, options)
</script>Horizontal pricing card
Get started with this horizontally aligned pricing card with a large list of feature items and a CTA button on the right side.
Horizontal pricing card
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<!-- Pricing Card -->
<div
class="bg-white rounded-lg shadow lg:grid lg:grid-cols-3 dark:bg-gray-800"
>
<div class="col-span-2 p-6 lg:p-8">
<h2 class="mb-1 text-2xl font-bold text-gray-900 dark:text-white">
Pricing built for all businesses.
</h2>
<p class="text-lg font-light text-gray-500 dark:text-gray-400">
Best for large scale uses and extended redistribution rights.
</p>
<div class="grid gap-4 mt-4 lg:mt-6 sm:grid-cols-2 md:grid-cols-3">
<!-- List -->
<ul role="list" class="space-y-4 dark:text-white">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>A/B Testing</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>24/7 Chat Support</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Custom Branding</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Creative Assistant</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Website Builder</span
>
</li>
</ul>
<!-- List -->
<ul role="list" class="space-y-4 dark:text-white hidden sm:block">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Customer Builder</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Marketing CRM</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Custom Templates</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Creative Assistant</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Multivariate Testing</span
>
</li>
</ul>
<!-- List -->
<ul role="list" class="space-y-4 dark:text-white hidden lg:block">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Advanced Tools</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Multivariate Testing</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Reporting</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Custom Templates</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="leading-tight text-gray-500 dark:text-gray-400"
>Dynamic Content</span
>
</li>
</ul>
</div>
</div>
<div class="flex p-6 text-center bg-gray-50 lg:p-8 dark:bg-gray-700">
<div class="self-center w-full">
<div class="text-5xl font-extrabold text-gray-900 dark:text-white">
$99
</div>
<div class="mt-1 mb-4 text-gray-500 text-light dark:text-gray-400">
per month
</div>
<a
href="#"
class="flex justify-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-bue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
>Buy now</a
>
<a
href="#"
class="flex justify-center items-center mt-4 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300"
>
View team pricing
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Block end -->Feature list description with pricing card
Use this example to show a more detailed description of features next to the pricing card from the right side.
Feature list description with pricing card
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 xl:gap-16 lg:py-16 lg:px-6"
>
<div class="text-gray-500 sm:text-lg">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Why you should upgrade to Flowbite Pro
</h2>
<p class="mb-8 font-light lg:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value.
</p>
<div
class="grid gap-8 py-8 border-t border-gray-200 lg:grid-cols-1 dark:border-gray-700 sm:grid-cols-2"
>
<div class="flex">
<div
class="flex justify-center items-center mr-4 w-12 h-12 bg-white rounded shadow shrink-0 dark:bg-gray-700"
>
<svg
class="w-7 h-7 text-gray-900 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
Industry analysis
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Benchmark your company against the industry to inform your growth
strategy and analyze market trends.
</p>
</div>
</div>
<div class="flex">
<div
class="flex justify-center items-center mr-4 w-12 h-12 bg-white rounded shadow shrink-0 dark:bg-gray-700"
>
<svg
class="w-7 h-7 text-gray-900 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
Company analysis
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Uncover competitor digital strategies and deep dive into any
company’s digital footprint.
</p>
</div>
</div>
<div class="flex">
<div
class="flex justify-center items-center mr-4 w-12 h-12 bg-white rounded shadow shrink-0 dark:bg-gray-700"
>
<svg
class="w-7 h-7 text-gray-900 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
App analysis
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Analyze app industry trends and discover audience interests to
learn which apps are gaining traction in the app ecosystem.
</p>
</div>
</div>
<div class="flex">
<div
class="flex justify-center items-center mr-4 w-12 h-12 bg-white rounded shadow shrink-0 dark:bg-gray-700"
>
<svg
class="w-7 h-7 text-gray-900 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
Audience analysis
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Benchmark your company against the industry to inform your growth
strategy and analyze market trends.
</p>
</div>
</div>
</div>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 bg-white rounded-lg shadow xl:p-8 dark:bg-gray-800"
>
<div class="justify-between items-center md:flex">
<div>
<div class="flex justify-between mb-2">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">
Pro Plan
</h3>
<div class="flex items-center md:hidden">
<div
class="mr-1 text-xl font-extrabold text-gray-900 lg:text-5xl dark:text-white"
>
$599
</div>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
</div>
<p
class="text-lg font-light text-gray-500 dark:text-gray-400 md:mr-2"
>
Best for large scale uses and extended redistribution rights.
</p>
</div>
<div class="hidden md:block">
<div
class="text-2xl font-extrabold text-gray-900 lg:text-5xl dark:text-white"
>
$599
</div>
<span class="text-gray-500 dark:text-gray-400">per month</span>
</div>
</div>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-5 lg:my-8 dark:focus:ring-primary-900"
>Upgrade now</a
>
<div class="justify-between space-y-4 sm:space-y-0 sm:flex">
<!-- List -->
<ul role="list" class="space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>A/B Testing</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>24/7 Email & Chat Support</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Custom Branding</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Creative Assistant</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Website Builder</span
>
</li>
</ul>
<!-- List -->
<ul role="list" class="space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Advanced Segmentation</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Multivariate Testing</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Comparative Reporting</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Custom Templates</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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="font-light leading-tight text-gray-500 dark:text-gray-400"
>Dynamic Content</span
>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Block end -->Comparison table
Use this example of pricing cards to also show a comparison table when clicking on the toggle link.
Comparison table
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div class="grid gap-8 mb-8 xl:grid-cols-3">
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-700 xl:p-8 dark:text-white dark:bg-gray-800"
>
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="text-gray-500 text-light sm:text-lg dark:text-gray-400">
Best option for personal use and for your next side projects.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-700 xl:p-8 dark:text-white dark:bg-gray-800"
>
<h3 class="mb-4 text-2xl font-semibold">Company</h3>
<p class="text-gray-500 text-light sm:text-lg dark:text-gray-400">
Relevant for multiple users, extended & premium support.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$99</span>
<span class="text-gray-500">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">10 developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">24 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">24 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-700 xl:p-8 dark:text-white dark:bg-gray-800"
>
<h3 class="mb-4 text-2xl font-semibold">Enterprise</h3>
<p class="text-gray-500 text-light sm:text-lg dark:text-gray-400">
Best for large scale uses and extended redistribution rights.
</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$499</span>
<span class="text-gray-500">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size:
<span class="font-semibold">100+ developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">36 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">36 months</span></span
>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
</div>
<button
type="button"
class="flex justify-center items-center mx-auto font-medium text-primary-600 dark-text-primary-400 hover:text-primary-700"
data-collapse-toggle="detailed-pricing"
>
Show Detailed Plan Comparison
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<!-- Comparison Table -->
<div id="detailed-pricing" class="hidden overflow-x-auto mt-8 w-full">
<div class="overflow-hidden min-w-max">
<div
class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">Tailwind CSS code</div>
<div>Community Edition</div>
<div>Developer Edition</div>
<div>Designer Edition</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Basic components (<a
href="https://flowbite.com/docs/components/alerts/"
class="text-primary-600 hover:underline"
>view all</a
>)
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Application UI (<a
href="/application-ui/preview/"
class="text-primary-600 hover:underline"
>view demo</a
>)
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Marketing UI pre-order
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
E-commerce UI pre-order
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">Figma design files</div>
<div>Community Edition</div>
<div>Developer Edition</div>
<div>Designer Edition</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Free edition (<a href="#" class="text-primary-600 hover:underline"
>duplicate in Figma</a
>)
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Application UI (<a href="#" class="text-primary-600 hover:underline"
>preview in Figma</a
>)
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
Marketing UI (<a href="#" class="text-primary-600 hover:underline"
>preview in Figma</a
>)
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">
E-commerce UI pre-order
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">HUGO templates</div>
<div>Community Edition</div>
<div>Developer Edition</div>
<div>Designer Edition</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">HUGO templates</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400">JSON data sources</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<svg
class="w-6 h-6 text-red-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<div
class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700"
>
<div class="text-gray-500 dark:text-gray-400"></div>
<div>
<a
href="#"
class="text-white block w-full bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Buy now</a
>
</div>
<div>
<a
href="#"
class="text-white block w-full bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Buy now</a
>
</div>
<div>
<a
href="#"
class="text-white block w-full bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Buy now</a
>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Block end -->Highlighted pricing plan
Use this example to highlight the most popular or feature pricing plan and increase the conversion rate for your potential customers.
Highlighted pricing plan
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
<div class="flex justify-center items-center">
<span class="text-base font-medium text-gray-900 dark:text-white">
Monthly
</span>
<!-- Switch Container -->
<div>
<label
for="toggle-example"
class="flex relative items-center mx-4 cursor-pointer"
>
<input type="checkbox" id="toggle-example" class="sr-only" />
<div
class="w-11 h-6 bg-gray-200 rounded-full border-2 border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-700"
></div>
</label>
</div>
<span class="text-base font-medium text-gray-500 dark:text-gray-400">
Yearly
</span>
</div>
</div>
<div class="grid gap-8 xl:grid-cols-3 xl:gap-10">
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-xl text-center bg-white rounded-lg border border-gray-200 shadow xl:max-w-lg dark:border-gray-700 dark:bg-gray-800 xl:p-8"
>
<h3 class="mb-4 text-2xl font-medium text-gray-900 dark:text-white">
Starter
</h3>
<span class="text-5xl font-extrabold text-gray-900 dark:text-white"
>$29</span
>
<p class="mt-4 mb-1 text-gray-500 text-light dark:text-gray-400">
$19 USD per month, paid annually
</p>
<a
href="#"
class="inline-flex justify-center items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Go to annual plan
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="text-white bg-gray-900 hover:bg-gray-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-8 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 dark:focus:ring-gray-600"
>Get started</a
>
<!-- List -->
<ul
role="list"
class="space-y-4 text-left text-gray-900 dark:text-gray-400"
>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
<path
fill-rule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clip-rule="evenodd"
></path>
</svg>
<span>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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>Comprehensive security</span>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
></path>
</svg>
<span class="line-through">Get hundreds of feature updates</span>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clip-rule="evenodd"
></path>
</svg>
<span class="line-through"> Payouts to your bank account</span>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z"
clip-rule="evenodd"
></path>
</svg>
<span class="line-through"
>Financial reconciliation and reporting</span
>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
clip-rule="evenodd"
></path>
</svg>
<span class="line-through"
>24×7 phone, chat, and email support</span
>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
></path>
</svg>
<span class="line-through">Robust developer platform</span>
</li>
</ul>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-xl text-center bg-white rounded-lg border shadow xl:max-w-lg border-primary-600 dark:bg-gray-800 xl:p-8"
>
<div class="mb-2">
<span
class="py-1 px-3 text-sm text-primary-800 bg-primary-100 rounded dark:bg-primary-200 dark:text-primary-800"
>Most popular</span
>
</div>
<h3 class="mb-4 text-2xl font-medium text-gray-900 dark:text-white">
Premium
</h3>
<span class="text-5xl font-extrabold text-gray-900 dark:text-white"
>$199</span
>
<p class="mt-4 mb-1 text-gray-500 text-light dark:text-gray-400">
$159 USD per month, paid annually
</p>
<a
href="#"
class="inline-flex justify-center items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Go to annual plan
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-8"
>Get started</a
>
<!-- List -->
<ul
role="list"
class="space-y-4 text-left text-gray-900 dark:text-gray-400"
>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
<path
fill-rule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clip-rule="evenodd"
></path>
</svg>
<span>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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>Comprehensive security</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
></path>
</svg>
<span>Get hundreds of feature updates</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clip-rule="evenodd"
></path>
</svg>
<span> Payouts to your bank account</span>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z"
clip-rule="evenodd"
></path>
</svg>
<span class="line-through"
>Financial reconciliation and reporting</span
>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
clip-rule="evenodd"
></path>
</svg>
<span class="line-through"
>24×7 phone, chat, and email support</span
>
</li>
<li class="flex items-center space-x-3 text-gray-500">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
></path>
</svg>
<span class="line-through">Robust developer platform</span>
</li>
</ul>
</div>
<!-- Pricing Card -->
<div
class="flex flex-col p-6 mx-auto max-w-xl text-center bg-white rounded-lg border border-gray-200 shadow xl:max-w-lg dark:border-gray-700 dark:bg-gray-800 xl:p-8"
>
<h3 class="mb-4 text-2xl font-medium text-gray-900 dark:text-white">
Enterprise
</h3>
<span class="text-5xl font-extrabold text-gray-900 dark:text-white"
>$599</span
>
<p class="mt-4 mb-1 text-gray-500 text-light dark:text-gray-400">
$499 USD per month, paid annually
</p>
<a
href="#"
class="inline-flex justify-center items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Go to annual plan
<svg
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="text-white bg-gray-900 hover:bg-gray-700 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-8 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 dark:focus:ring-gray-600"
>Get started</a
>
<!-- List -->
<ul
role="list"
class="space-y-4 text-left text-gray-900 dark:text-gray-400"
>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
<path
fill-rule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clip-rule="evenodd"
></path>
</svg>
<span>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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>Comprehensive security</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
></path>
</svg>
<span>Get hundreds of feature updates</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clip-rule="evenodd"
></path>
</svg>
<span> Payouts to your bank account</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z"
clip-rule="evenodd"
></path>
</svg>
<span>Financial reconciliation and reporting</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
clip-rule="evenodd"
></path>
</svg>
<span>24×7 phone, chat, and email support</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
></path>
</svg>
<span>Robust developer platform</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Block end -->Pricing plan with toggle switch
Use this example to switch the pricing plan based on a monthly or yearly plan based on the toggle switch component from the Flowbite library.
Pricing plan with toggle switch
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="max-w-screen-md mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
<div class="flex items-center">
<span class="text-base font-medium text-gray-900 dark:text-white">
Monthly
</span>
<!-- Switch Container -->
<div>
<label
for="toggle-example"
class="flex relative items-center mx-4 cursor-pointer"
>
<input type="checkbox" id="toggle-example" class="sr-only" />
<div
class="w-11 h-6 bg-gray-200 rounded-full border-2 border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-700"
></div>
</label>
</div>
<span class="text-base font-medium text-gray-500 dark:text-gray-400">
Yearly
</span>
</div>
</div>
<div
class="mb-4 lg:mb-8 space-y-8 lg:grid lg:grid-cols-3 md:gap-12 xl:gap-16 lg:space-y-0"
>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg text-gray-900 dark:text-gray-400">
<h3 class="font-semibold text-gray-500 uppercase dark:text-gray-400">
Freelancer
</h3>
<div class="flex items-baseline my-4">
<span
class="mr-2 text-5xl font-extrabold text-gray-900 dark:text-white"
>$49</span
>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-300">
Best option for personal use and for your next side projects.
</p>
<!-- List -->
<ul role="list" class="my-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>No setup, monthly, or hidden fees</span>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg text-gray-900 dark:text-gray-400">
<h3 class="font-semibold text-gray-500 uppercase dark:text-gray-400">
Company
</h3>
<div class="flex items-baseline my-4">
<span
class="mr-2 text-5xl font-extrabold text-gray-900 dark:text-white"
>$199</span
>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-300">
Best option for personal use and for your next side projects.
</p>
<!-- List -->
<ul role="list" class="my-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Comprehensive security and rigorous</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Get hundreds of feature updates</span>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg text-gray-900 dark:text-gray-400">
<h3 class="font-semibold text-gray-500 uppercase dark:text-gray-400">
Enterprise
</h3>
<div class="flex items-baseline my-4">
<span
class="mr-2 text-5xl font-extrabold text-gray-900 dark:text-white"
>$999</span
>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-300">
Best option for personal use and for your next side projects.
</p>
<!-- List -->
<ul role="list" class="my-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>All tools you need to manage payments</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>No setup, monthly, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Comprehensive security</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Get hundreds of feature updates</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Payouts to your bank accounts</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Financial reconciliation</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>24×7chat and email support</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<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>Robust developer platform</span>
</li>
</ul>
<a
href="#"
class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>Get started</a
>
</div>
</div>
</div>
</section>
<!-- Block end -->