 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--SgskbW3k--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv9j9rxzyendlj95aaq0.png)
By definition, a Pricing Table is simply a card that shows how much a given service costs or how much a given package costs for different time lengths.
This kind of component is mostly used in Software as a Service (SaaS) presentation websites, where people can subscribe for a weekly, monthly or even yearly subscription. They usually provide multiple options, and the customer picks the one which suits him/her best needs.
For our example, we have 2 plans: Starter, and Professional. Which have different prices, depending on the subscription plan (Either Monthly or Yearly).
But for sure, one can always customize the component in such a way that a plan can be added, removed or modified.
Without any further ado, let's dive straight into the implementation.
Understanding the task
From the design, we can observe that this component can be divided into 2 parts, The Header, and the Different Subscriptions.
As you might have noticed, both plans, somehow look identical to each other. Yeah, except for the different packages they offer, and the subscription fee too. Therefore, if we design one plan, we can simply replicate it, and edit the text content to build the other plan.
Structure of Code
As I always say, I have the same structure when it comes to designing components. Simply because I believe they somehow have the same root. 😃
This is how it goes
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!-- Header -->
<div></div>
<!-- Subscription Plan -->
<div></div>
</div>
</div>
</body>
Let's Build this component, part by part. Let's begin with the header, then we build the subscription Plans
Pricing Table Header
This is the easiest of all. Trust me.
<!-- Header -->
<div class="flex items-center justify-between flex-wrap gap-y-3 mb-10">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900">Choose your plan</h2>
<div class="flex text-xs rounded-full bg-slate-300 w-fit [&>*]:px-2 [&>*]:py-1 [&>*:hover]:bg-white [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800 p-0.5 [&>*]:cursor-pointer [&>*]:rounded-full gap-3">
<p id="month">Monthly</p>
<p id="year" class="bg-white">Yearly</p>
</div>
</div>
Let’s get to understand the above code:
This section consists of 2 parts: The title (let's just call it the title) and the Duration slide (Monthly/Yearly).
For the title: We simply gave it a
font-sizeof text-2xlon mobile screen and a size ofsm:text-3xlfrom 640px and above. Made the text bold withfont-boldDuration Slide: They are just 2 paragraphs that we styled from the parent container, using the property [&>*]:
If you are used to my posts, by now you surely know the meaning of [&>*] in tailwindcss.
But if you are new, The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.
To each child(in this situation we are talking about paragraphs (p)), we gave it a width of w-fit, we also gave each of them a border-radius of rounded-full, and a padding-inline of px-2, padding-block of py-1. We also gave it some effects visible on hover, like background-color changing to white, [&>*:hover]:bg-white and box-shadow [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800
That's pretty much it for the header
Take note of the different IDs given the Monthly and Yearly plans. Monthly (id="month") and Yearly (id="year"). As it will be used in the javascript file
Subscription Plan
This is the main part of the component. And also, it is easy to build.
The basic HTML looks like this for the Starter Subscription
<!-- Subscription Plan -->
<div>
<!-- Starter Subscription Plan -->
<div>
<h2>Starter</h2>
<div>
<div id="starter"><h2>$8.99/month</h2></div>
<p id="starter_in">Billed yearly</p>
</div>
<p>
Pretium fusce id velit ut tortor pretium. Sit amet consectetur adipiscing elit ut.
Condimentum mattis pellentesque id nibh. Euismod elementum.
</p>
<div class="border border-slate-900 cursor-pointer active:scale-95 bg-slate-900 text-white hover:bg-white hover:text-slate-900 text-sm py-2 rounded text-center font-bold">
<h3>Get Started</h3>
</div>
</div>
</div>
Basically, that's the HTML of the Starter Subscription plan. Since both plans are identical in structure, I decided to style both of them from the Parent container, so as to make the code more readable.
This is how the parent container looks like
<!-- Subscription Plan -->
<div class="flex items-center justify-between flex-wrap gap-y-5 [&>*]:flex [&>*]:justify-between [&>*]:flex-col [&>*:hover]:shadow-md [&>*:hover]:shadow-slate-900 [&>*]:w-full [&>*]:sm:max-w-[18rem] [&>*]:bg-white [&>*]:rounded [&>*]:h-[18rem] [&>*]:p-8
[&>*>h2]:text-lg [&>*>h2]:font-bold [&>*>h2]:text-slate-900
[&>*>div>p]:text-sm [&>*>div>p]:text-slate-600 [&>*>p]:text-xs [&>*>p]:text-slate-400 [&>*>div>div>h2]:text-lg [&>*>div>div>h2]:font-bold [&>*>div>div>h2]:text-slate-900">
<!-- Starter Subscription Plan -->
<div></div>
<!--Proffessional Subscription Plan -->
<div></div>
</div>
As earlier discussed in the header section, we used [&>*] and similar styling to target specific elements in the structure and give them specific stylings.
And That's principally it for this section.
Additional Stylings
It's important mentioning that we applied some extra stylings to center our component in the middle of the screen and also give it a given width
<body class="bg-slate-200 flex items-center justify-center min-h-screen">
<!-- First Layer -->
<div class="w-full sm:max-w-[38rem] p-5 sm:p-0 [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-150">
<!-- Second Layer -->
<div>
<!-- Header -->
<div></div>
<!-- Subscription Plan -->
<div></div>
</div>
</div>
</body>
Now, Let's make this component functional. Such that you can be able to switch between Monthly and Yearly subscriptions.
Javascript
The Javascript used here is pretty straightforward, as it just involves changing the content of an element. For this tutorial, this is what we have
const month = document.getElementById("month");
const year = document.getElementById("year");
const starter = document.getElementById("starter");
const pro = document.getElementById("pro");
const starter_in = document.getElementById("starter_in");
const pro_in = document.getElementById("pro_in");
month.addEventListener("click", ()=>{
month.classList.add("bg-white");
year.classList.remove("bg-white");
starter.innerHTML = `<h2>$2.99/week</h2>`
starter_in.innerHTML = "Billed monthly"
pro.innerHTML = `<h2>$5.99/week</h2>`
pro_in.innerHTML = "Billed monthly"
})
year.addEventListener("click", ()=>{
year.classList.add("bg-white");
month.classList.remove("bg-white");
starter.innerHTML = `<h2>$8.99/month</h2>`
starter_in.innerHTML = "Billed yearly"
pro.innerHTML = `<h2>$21.99/month</h2>`
pro_in.innerHTML = "Billed yearly"
})
And that's all for this tutorial!
Conclusion
We just built a simple Pricing Table Component and in the process, we also had more insight about Tailwindcss.
Many employers will need such components to be added to their websites, and for sure you know how simple it is to create it straight from your HTML document.
You can have a Live preview on Codepen or find the code on GitHub
Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your card.
If you have any worries or suggestions, don’t hesitate to bring them up! 😊
See ya! 👋
Top comments (0)