 daily UI Challenge_](https://res.cloudinary.com/practicaldev/image/fetch/s--kqgeKyUc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnj1yx7uxe45js3puzc2.png)
By definition a Pricing Plan is simply a card that shows how much a given service costs or how much a given package cost for different period of time.
This kind of components 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 pick the one which suits him/her best needs.
For our example, we have 2 plans:Basic, and Pro. 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.
It should be noted that this tutorial is done using TailwindCSS, which works using Node Package Manager (npm), so it is important that Node is installed, and then tailwindcss should be install later on. You can read more at https://tailwindcss.com/docs/installation
Understanding the task
As you might have noticed, both plans, somehow look identical to each other. Yeah, except for the different packages they offer. Therefore, if we design one plan, we can simply replicate it, edit the text content to build the other plan.
Dividing plan into different partsNow, we can observe that a plan can be divided into 3 parts (indicated by the three squares on the image). With this mind, let's get started ! 😁
Structure of Code
<body>
<div>
<div>
<!-- Basic Plan -->
<div class="basic"></div>
<!-- Pro Plan -->
<div class="pro"></div>
</div>
</div>
</body>
Let's focus on the basic plan, as we will design it, then replicate and form the pro plan.
<!-- Basic Plan -->
<div class="basic border-b sm:border-b-0 sm:border-r border-[#b1a9ab] border-opacity-25 pb-10 mb-10 sm:pb-0 sm:mb-0 sm:pr-10 sm:mr-10">
<!-- First Part -->
<div>
<h2 class="text-3xl font-semibold">Basic</h2>
<ul class="mt-3">
<li class="text-xl">Free</li>
<li>3,000 monthly visitors</li>
</ul>
</div>
<!-- Second Part -->
<div class="my-10">
<ul class="[&>*]:flex [&>*]:items-end [&>*]:gap-1 [&>*>div]:text-[10px] [&>*]:">
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
Limited reports
</li>
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
Unlimited projects
</li>
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
Data storage for 1 year
</li>
</ul>
</div>
<!-- Third Part -->
<div class="w-56 px-8 py-4 text-[#af2830] border border-[#af2830] text-center font-semibold rounded cursor-pointer hover:bg-[#af2830] hover:text-[#b1a9ab]">
<h2>Start now</h2>
</div>
</div>
Let's get to understand the above code:
We divided the Basic plan into 3 parts: First, second and third part
First Part: We have basic plan text with CSS properties of font-semibold (font-weight ~ 700) and text-3xl (font-size ~ 1.875rem). Followed by a normal unordered list having two list items; Free and number of monthly visitors
Second Part: This part mainly has what the Basic plan package offers. It is arranged in the form of an unordered list, with each list item consisting of two parts, an icon, and a text.
The icons were exported from iconify, you can check it out.
The properties [&>*] simply means "select each individual child", this allows us to apply the same styling properties to all the immediate children
Third Part: This contains the call to actions button. I decided to put it as a separate part as it kinda gives me a clear view of my code and can easily work around it.
Pro Plan
This is the "most easiest" part of the work, Crtl + c, then Crtl + v (Copy and paste) 😎✌️
<!-- Pro Plan -->
<div>
<!-- First Part -->
<div>
<h2 class="text-3xl font-semibold">Pro</h2>
<ul class="mt-3">
<li class="text-lg"><span class="text-xl">$19</span> / month</li>
<li>10,000 monthly visitors</li>
</ul>
</div>
<!-- Second Part -->
<div class="my-10">
<ul class="[&>*]:flex [&>*]:items-end [&>*]:gap-1 [&>*>div]:text-[10px]">
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
Unlimited reports
</li>
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
15-days free trial
</li>
<li>
<div>
<iconify-icon icon="ic:baseline-circle"></iconify-icon>
</div>
Data storage for 3 year
</li>
</ul>
</div>
<!-- Third Part -->
<div class="w-56 px-8 py-4 bg-[#af2830] text-center font-semibold rounded cursor-pointer border border-[#af2830] hover:bg-transparent hover:text-[#af2830]">
<h2>Try it</h2>
</div>
</div>
Replicating the structure of Basic Plan, then adjusting the text as per the plan.
Looks Like something is lacking 🤔.
Ooh True! The Pricing Card Shadow💡!
Let's do that too.
Back to the main container, let's add the box-shadow, together with some extra properties like width, border radius(rounded-md), text color (#b1a9ab), paddings(px, py) and margins(mx, my).
<body class="bg-[#af2830] flex items-center justify-center min-h-screen selection:text-white selection:bg-[#af2830]">
<div class="relative after:content-[''] after:absolute after:bottom-[-3.5rem] after:left-[-8%] after:bg-[rgb(153,26,34,0.8)]
after:w-[115%] after:h-[7rem] after:rounded-[50%] after:-z-10 bg-[#22161a] w-full max-w-2xl h-full rounded-md text-[#b1a9ab]
px-10 py-12 sm:py-14 space-y-6 shadow-2xl [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<div class="flex flex-col sm:flex-row items-center justify-center gap-y-10 sm:gap-5">
<!-- Basic Plan -->
<div class="basic"></div>
<!-- Pro Plan -->
<div class="pro"></div>
</div>
</div>
</body>
If you noticed very well, we also added some properties to the body tag, this are just to set the beautiful background on the picture, and to also center our Pricing plan component at the center of the screen. Of course there is an extra styling, that I will allow you to discover 😉
And That's it! It should be all good. 😍
Conclusion
We just built a simple Pricing component without opening our CSS file. Thanks to Tailwindcss. Many employers will need such components to be added to their website, 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 additions component and styling you added to you card.
If you have any worries or suggestions, don't hesitate to bring it up ! 😊
See ya ! 👋
Top comments (0)