Live Demo / Download
The pricing table is without doubt one of the most important components of any landing page, website, or app. It’s that small portion of your product where all the efforts to reach, persuade, and ultimately acquire your users come to fruition, allowing you to transform prospects into long-time loyal customers.
There are numerous types of pricing tables that are suitable for different products, but for this tutorial, we will focus on commonly seen example in SaaS apps, which involves a monthly/yearly toggle switch developed with Alpine.js.
At Cruip, we have developed dozens of pricing tables of this kind for our templates. So, if you need some inspiration, we recommend checking out this startup landing page template called Cube or this landing page layout called Creative.
Are you ready to start reading? So, let’s dive in!
Creating the HTML structure with Tailwind CSS
Assuming we want to display three pricing tabs, let’s create a container div using CSS grid with a 3-column layout and a 24-pixel gap (gap-6). The 3-column grid will be activated when the browser window width is greater than 1024 pixels (note the lg: prefix applied to the grid-cols-3 class). Below that breakpoint, we will ensure that each tab is stacked, with a maximum width of 384 pixels (max-w-sm applied to the container).
<div>
<!-- Pricing toggle -->
<div> ... </div>
<!-- Pricing tabs container -->
<div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none">
<!-- Pricing tab 1 -->
<!-- Pricing tab 2 -->
<!-- Pricing tab 3 -->
</div>
</div>
Now let’s create the structure for a single pricing tab:
<div class="h-full"><!-- Add a .dark class here for the dark card -->
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Essential</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">29</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
</ul>
</div>
</div>
To ensure that all cards have consistent height, regardless of their content, we apply the classes flex flex-col h-full to the container div that holds the card elements.
As you may have noticed, we have also included the dark: prefix with various classes, enabling us to switch to the dark version of the card by simply adding the dark class to the parent div.
But that’s not all. The central card needs to display a “Most Popular” label. To achieve this, we need to add a few more lines of code before the card content:
<div class="h-full dark">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<!-- Popular label -->
<div class="absolute top-0 right-0 mr-6 -mt-4">
<div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
</div>
<div class="mb-5"> ...
And here is the final version of the pricing cards:
<div>
<!-- Pricing toggle -->
<div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none">
<!-- Pricing tab 1 -->
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Essential</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">29</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
</ul>
</div>
</div>
<!-- Pricing tab 2 -->
<div class="dark h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="absolute top-0 right-0 mr-6 -mt-4">
<div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
</div>
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Perform</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">49</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
</ul>
</div>
</div>
<!-- Pricing tab 3 -->
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Enterprise</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl">79</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Free from repetition</span>
</li>
</ul>
</div>
</div>
</div>
</div>
Creating the toggle switch element
Great, let’s proceed with creating the toggle switch that will allow us to display the different prices depending on whether the user subscribes to the plan on a monthly or yearly basis.
This element can be created in different ways: with a single input of type checkbox, with two input of type radio, or, as we have chosen to do, with two button elements side by side.
Here is the structure of the toggle switch:
<div class="flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16">
<div class="relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full">
<span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
<span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out"></span>
</span>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 text-white transition-colors duration-150 ease-in-out">Yearly <span class="text-indigo-200">-20%</span></button>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 text-slate-500 dark:text-slate-400 transition-colors duration-150 ease-in-out">Monthly</button>
</div>
</div>
We have set a maximum width of 224px to the root element, which can be adjusted according to the text content in the two buttons.
The span element is responsible for rendering the indigo background of the toggle switch. It smoothly transitions horizontally to indicate the current state of the toggle, making it clear to the user which pricing option they have selected.
Making the toggle work with Alpine.js
Now that we have the HTML structure in place, we need to make the toggle switch functional. By default, we want to display the prices for the annual subscription and have the “Yearly” button active.
To achieve this, we need to define a variable called isAnnual and set its initial state to true. We can do this by adding the directive x-data="{ isAnnual: true }" to the root div of our component.
Next, we want to ensure that when the “Monthly” button is clicked, isAnnual changes to false, and when the “Yearly” button is clicked, it becomes true again. We can achieve this by adding the directive @click="isAnnual = false" to the “Monthly” button and @click="isAnnual = true" to the “Yearly” button.
Finally, we need to update the style of some elements in the toggle switch based on the current state of the isAnnual variable. Additionally, we need to ensure that the span element we mentioned earlier is positioned correctly to highlight the “active” button with the indigo background.
<div class="flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16">
<div class="relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full">
<span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
<span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out" :class="isAnnual ? 'translate-x-0' : 'translate-x-full'"></span>
</span>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-white' : 'text-slate-500 dark:text-slate-400'" @click="isAnnual = true">isAnnual <span :class="isAnnual ? 'text-indigo-200' : 'text-slate-400 dark:text-slate-500'">-20%</span></button>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-slate-500 dark:text-slate-400' : 'text-white'" @click="isAnnual = false">Monthly</button>
</div>
</div>
Now, let’s move on to the pricing tabs and ensure that the displayed prices are updated based on the isAnnual state. Specifically, for the first pricing tab, we want to show a price of $29 if isAnnual is true and $34 if it is false.
To achieve this, remove the previously inserted numerical value from the tag that contains the price value, and use the x-text directive to define the value to return based on the isAnnual state with a ternary operator:
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl" x-text="isAnnual ? '29' : '35'"></span>
Copy
Let’s apply the same logic to the other pricing tabs, and we’re done!
Conclusions
There you have it! The final result of the pricing tabs component made with pure HTML, Tailwind CSS, and Alpine.js is now complete.
<div x-data="{ isAnnual: true }">
<!-- Pricing toggle -->
<div class="flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16">
<div class="relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full">
<span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true">
<span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out" :class="isAnnual ? 'translate-x-0' : 'translate-x-full'"></span>
</span>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-white' : 'text-slate-500 dark:text-slate-400'" @click="isAnnual = true">Yearly <span :class="isAnnual ? 'text-indigo-200' : 'text-slate-400 dark:text-slate-500'">-20%</span></button>
<button class="relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out" :class="isAnnual ? 'text-slate-500 dark:text-slate-400' : 'text-white'" @click="isAnnual = false">Monthly</button>
</div>
</div>
<div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none">
<!-- Pricing tab 1 -->
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Essential</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl" x-text="isAnnual ? '29' : '35'"></span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
</ul>
</div>
</div>
<!-- Pricing tab 2 -->
<div class="dark h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="absolute top-0 right-0 mr-6 -mt-4">
<div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
</div>
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Perform</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl" x-text="isAnnual ? '49' : '55'"></span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
</ul>
</div>
</div>
<!-- Pricing tab 3 -->
<div class="h-full">
<div class="relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950/5">
<div class="mb-5">
<div class="text-slate-900 dark:text-slate-200 font-semibold mb-1">Enterprise</div>
<div class="inline-flex items-baseline mb-2">
<span class="text-slate-900 dark:text-slate-200 font-bold text-3xl">$</span>
<span class="text-slate-900 dark:text-slate-200 font-bold text-4xl" x-text="isAnnual ? '79' : '85'"></span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
<div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
<a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
Purchase Plan
</a>
</div>
<div class="text-slate-900 dark:text-slate-200 font-medium mb-3">Includes:</div>
<ul class="text-slate-600 dark:text-slate-400 text-sm space-y-3 grow">
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Unlimited placeholder texts</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Consectetur adipiscing elit</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Excepteur sint occaecat cupidatat</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Officia deserunt mollit anim</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Predefined chunks as necessary</span>
</li>
<li class="flex items-center">
<svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Free from repetition</span>
</li>
</ul>
</div>
</div>
</div>
</div>
Now you’re finally ready to implement it into your app and start growing your MRR/ARR with style 🙂
If you are looking for the same component in other stacks, we recommend checking out the other two parts of this tutorial developed with Next.js and Vue:
Top comments (0)