Anjolaoluwa Adebayo-Oyetoro Maker. Writes sometimes. playful most times. loves beautiful UIs

Building a pricing component with Tailwind CSS

12 min read 3366

In this article, we’ll be building a simple responsive pricing table component with HTML and Tailwind CSS — a utility-first CSS framework.

Why Tailwind?

Tailwind offers no pre-configured styles and components to build with, rather it offers you a set of unopinionated building blocks known as utility/helper classes to help you style your components. This helps with creating custom designs without having to override unwanted styles.

The final version of our component will look similar to this:

pricing page design
This design was made available as one of the developer challenges on Frontend Mentor.

Prerequisites

Getting started

First, let’s create our project directory:

mkdir pricing-component

Next, change directory to the created folder:

cd pricing-component

Run the following commands to create a package.json file inside your project folder:

npm init -y

This creates a package.json file with default presets.

Proceed to create an Index.html file and include the following content in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Pricing Component</title>
</head>
<body>

</body>
</html>

Installation and usage of Tailwind

You can get started with using Tailwind in your project by simply pulling in the latest default configuration build via CDN and linking it in the head tag of your HTML:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Note — many features of Tailwind CSS are not available using the CDN build. To get the most out of Tailwind, you really should install it using a package manager.

Using a package manager

To install Tailwind with the Yarn package manager, type in the following command in your terminal:

We made a custom demo for .
No really. Click here to check it out.

yarn add tailwindcss

This command adds the latest stable version of Tailwind CSS as a dependency (Version 1.4.5 at the time of this writing).

Next, proceed to create a default configurations scaffold, this helps to customize your Tailwind installation using the Tailwind CLI utility included when you install the tailwindcss package:

npx tailwindcss init

This command creates an empty tailwind.config.js in your project’s base directory, in this file, you can define any customization.

Use the --full option with the command to scaffold the entire Tailwind’s default configurations in the file, so you can customize it as you see fit:

npx tailwindcss init --full

To learn more about customizing your config file, check the documentation.

Proceed to create a folder to house our stylesheets:

mkdir styles

Next, create a tailwind.css file and a styles.css file inside the styles folder, the tailwind.css is where we will be importing Tailwind’s base styles and configuration while the styles.css file will contain the compiled output of tailwind.css.

Use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your CSS, place the following content in your tailwind.css file:

@tailwind base;

@tailwind components;

@tailwind utilities;

Then proceed to import your styles.css file into your project. Either in your JavaScript file or as a link in your HTML like this:

<link href="styles/styles.css" rel="stylesheet">

Configure your style guide

We need to define our custom styles like width, color, and fonts in our configuration file.

First, open the tailwind.config.js file and include the following inside the theme object.

fontFamily: {
      sans: [
        'Montserrat',
        'sans-serif',
      ],
    }

Next, create an extend object inside the theme object and include the following:

colors:{
    primary: {
        blue: 'hsl(237, 63%, 64%)',
        'very-light': 'hsl(240, 78%, 98%)',
        light: 'hsl(234, 14%, 74%)',
        normal: 'hsl(233, 13%, 49%)',
        dark: 'hsl(232, 13%, 33%)'
      }
  },
width: {
    custom: '31%'
  }

After including our custom styles, the config file should look similar to this:

module.exports = {
  theme: {
    extend: {
      colors:{
        primary: {
          blue: 'hsl(237, 63%, 64%)',
          'very-light': 'hsl(240, 78%, 98%)',
          light: 'hsl(234, 14%, 74%)',
          normal: 'hsl(233, 13%, 49%)',
          dark: 'hsl(232, 13%, 33%)'
        }
      },
      width: {
        custom: '31%'
      }
    },
    fontFamily: {
      sans: [
        'Montserrat',
        'sans-serif',
      ],
    }
  },
  variants: {},
  plugins: [],
}

Next, import the Montserrat font in your tailwind.css file:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

Compile and build the styles generated from yourtailwind.css file with the Tailwind CLI utility tool, run this command:

npx tailwindcss build styles/tailwind.css -o styles/styles.css

This generates an opinionated set of base styles and normalize.css which solves cross-browser inconsistencies in your Tailwind projects and your custom styles defined in the configuration file.

Creating the base structure

We will begin by writing the HTML for our design without styles, this makes our work faster as we can just dive right into styling the HTML after.

First, let’s create a header element inside our body tag, this would contain the pricing text and the toggle switch.

<header class=""> </header>

Now, inside the header tag, we’ll add a h2 element that will contain the text and a wrapper div for our pricing categories and the toggle switch.

<header class="">
  <h2 class="">Our Pricing</h2>
  <div class=" ">

  </div>
</header>

Next, we add our pricing categories and a label element that contains a checkbox input element and two divs which we will be using to create the switch.

<header class="">
 <h2 class="">Our Pricing</h2>
 <div class=" ">
   <p class="">Annually</p>
   <div>
     <label for="toggle" class="">
       <input type="checkbox" name="toggle" id="" class="" />
         <div class=""></div>
         <div class=" "></div>
       </label>
     </div>
    <p class="">Monthly</p>
  </div>
</header>

Let’s proceed to create the pricing table section, we’ll create a section tag and inside it an article tag that will contain our pricing information:

<section class=" ">
  <article class="">
     <h5 class="">Basic</h5>
     <h2 class="">
       <span class="">$</span>
       <span class="l"> 199.99</span>
     </h2>
     <ul class="">
      <li class="">500 GB Storage</li>
       <li class="">2 Users Allowed</li>
       <li class="">Send up to 3 GB</li>
    </ul>
     <button class="">
       Learn More
     </button>
   </article>
</section>

To finish this up we just need to replicate the article tag two more times and change the content inside of it:

<section class=" ">
   <article class="">
     <h5 class="">Basic</h5>
     <h2 class="">
       <span class="">$</span>
       <span class="l"> 199.99</span>
     </h2>
     <ul class="">
       <li class="">500 GB Storage</li>
       <li class="">2 Users Allowed</li>
       <li class="">Send up to 3 GB</li>
     </ul>
     <button class="">
      Learn More
     </button>
   </article>
   <article class="">
     <h5 class="">Professional</h5>
     <h2 class="">
       <span class="">$</span>
       <span class=""> 249.99</span>
     </h2>
     <ul class="">
       <li class="">1 TB Storage</li>
       <li class="">5 Users Allowed</li>
       <li class="">Send up to 10 GB</li>
     </ul>
     <button class="">
       Learn More
     </button>
   </article>
   <article class="">
     <h5 class="">Master</h5>
     <h2 class="">
       <span class="">$</span>
       <span class="">399.99</span>
     </h2>
     <ul class="">
       <li class="">2 TB Storage</li>
       <li class="">10 Users Allowed</li>
       <li class="">Send up to 20 GB</li>
     </ul>
     <button class="">
       Learn More
     </button>
   </article>
 </section>

When we’re done with that, the contents of our HTML will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="styles/styles.css">
    <title>Welcome to Tailwind!</title>
  </head>
  <body class="">
    <header class="">
      <h2 class="">Our Pricing</h2>
      <div class=" ">
        <p class="">Annually</p>
        <div>
          <label for="toggle" class="">
            <input type="checkbox" name="toggle" id="" class="" />
            <div class=""></div>
            <div class=" "></div>
          </label>
        </div>
        <p class="">Monthly</p>
      </div>
    </header>
    <section class=" ">
      <article class="">
        <h5 class="">Basic</h5>
        <h2 class="">
          <span class="">$</span>
          <span class="l"> 199.99</span>
        </h2>
        <ul class="">
          <li class="">500 GB Storage</li>
          <li class="">2 Users Allowed</li>
          <li class="">Send up to 3 GB</li>
        </ul>
        <button class="">
          Learn More
        </button>
      </article>
      <article class="">
        <h5 class="">Professional</h5>
        <h2 class="">
          <span class="">$</span>
          <span class=""> 249.99</span>
        </h2>
        <ul class="">
          <li class="">1 TB Storage</li>
          <li class="">5 Users Allowed</li>
          <li class="">Send up to 10 GB</li>
        </ul>
        <button class="">
          Learn More
        </button>
      </article>
      <article class="">
        <h5 class="">Master</h5>
        <h2 class="">
          <span class="">$</span>
          <span class="">399.99</span>
        </h2>
        <ul class="">
          <li class="">2 TB Storage</li>
          <li class="">10 Users Allowed</li>
          <li class="">Send up to 20 GB</li>
        </ul>
        <button class="">
          Learn More
        </button>
      </article>
    </section>
  </body>
</html>

and the output will look similar to this:

project without tailwind

Using Tailwind CSS

Next, let’s begin adding our styles to the HTML:

<body class="h-full py-16 antialiased bg-primary-very-light font-sans">
  <header class= "flex flex-col items-center mb-12">
     <h2 class="text-3xl text-primary-normal font-bold">Our Pricing</h2>
     <div class="pt-8 w-3/5 lg:w-1/5 flex justify-around ">
       <p class="text-sm text-gray-500 font-bold mt-2">Annually</p>
       <div>
         <label for="toggle" class="relative">
         <input type="checkbox" name="toggle" id="" class="hidden" />
         <div
           class="absolute w-16 h-8 rounded-full shadow-inner inset-y-0 " style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);"
         ></div>
         <div
           class="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 mt-1 ml-1 "
         ></div>
       </label>
       </div>
       <p class="text-sm text-gray-500 font-bold mt-2 ml-16">Monthly</p>
     </div>
  </header>

What we’ve just done is, we given the body tag a height of 100%, a font smoothing of antialiased and changed the font-family to the font we defined in the config file.

We added a flex class to the header tag with a flex-direction: column and aligned our items to the center on the main axis, we then increased the font-size of our pricing text and changed the font color. In the div class that contains our pricing categories and the toggle switch, we gave it a flex class and a width of 60% on small screens and 20% on larger screens, we then gave the checkbox a hidden class that sets the value of display to none.

We then gave the two divs that form the toggle a position of relative and a border-radius of 100%, we also gave the “line” in the toggle switch a linear gradient background-image as other ways to use a background-image in Tailwind CSS is are quite lengthy.

Next, let’s style the pricing cards section:

<section class="flex flex-col lg:flex-row items-start items-center lg:justify-center w-full w-full lg:px-10 py-12 ">
  <article class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg">
    <h5 class="font-bold text-base">Basic</h5>
    <h2 class="pb-4 flex justify-center font-bold border-b border-gray-300">
      <span class="text-3xl mt-6 mr-1">$</span
      ><span class="text-6xl"> 199.99</span>
    </h2>
    <ul class="text-sm font-bold">
      <li class="pt-4 pb-4 border-b border-gray-300">500 GB Storage</li>
      <li class="pt-3 pb-4 border-b border-gray-300">2 Users Allowed</li>
      <li class="pt-4 pb-4 border-b border-gray-300">Send up to 3 GB</li>
    </ul>
    <button class=" uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 font-bold text-primary-very-light rounded-md" style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);">
      Learn More
    </button>
  </article>
  <article class="lg:w-custom w-4/5 mb-10 px-6 py-16 lg:-mt-6 text-white text-center rounded-lg" style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);">
    <h5 class="font-bold text-base ">Professional</h5>
    <h2 class="font-bold pb-4 mt-2 border-b border-gray-100 flex justify-center">
      <span class="text-3xl mt-6 mr-1">$</span
      ><span class="text-6xl "> 249.99</span>
    </h2>
    <ul class=" text-sm font-bold">
      <li class="pt-4 pb-4 border-b border-gray-200">1 TB Storage</li>
      <li class="pt-4 pb-4 border-b border-gray-200">5 Users Allowed</li>
      <li class="pt-4 pb-4 border-b border-gray-200">Send up to 10 GB</li>
    </ul>
    <button class="uppercase text-center text-sm mt-10 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold bg-primary-very-light text-primary-blue">
      Learn More
    </button>
  </article>
  <article class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg">
    <h5 class="font-bold text-base">Master</h5>
    <h2 class="flex justify-center pb-4 font-bold border-b border-gray-200">
      <span class="text-3xl mt-6 mr-1">$</span
      ><span class="text-6xl">399.99</span>
    </h2>
    <ul class="text-sm font-bold">
      <li class="pt-4 pb-4 border-b border-gray-200">2 TB Storage</li>
      <li class="pt-4 pb-4 border-b border-gray-200">10 Users Allowed</li>
      <li class="pt-4 pb-4 border-b border-gray-200">Send up to 20 GB</li>
    </ul>
    <button class="uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold text-primary-very-light" style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);">
      Learn More
    </button>
  </article>
</section>

First, we gave our section a class of flex and a flex-direction:column on smaller screens and row on bigger ones, we then centered the contents on the main axis.

We styled our article tags by giving them a custom width of 31% on large screens and a width of 80% on smaller ones, we gave it a border-radius of 0.5rem and aligned our texts to the center. We made the background of the second price category a linear gradient and the button in our first and third price category then gave the buttons a text-transform: uppercase

Our final code should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <title>Tailwind Pricing Component</title>
</head>
<body class="h-full py-16 antialiased bg-primary-very-light font-sans">
    <header class="flex flex-col items-center mb-12">
      <h2 class="text-3xl text-primary-normal font-bold">Our Pricing</h2>
      <div class="pt-8 w-3/5 lg:w-1/5 flex justify-around ">
        <p class="text-sm text-gray-500 font-bold mt-2">Annually</p>
        <div>
          <label for="toggle" class="relative">
            <input type="checkbox" name="toggle" id="" class="hidden" />
            <div
              class="absolute w-16 h-8 rounded-full shadow-inner inset-y-0 "
              style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);"
            ></div>
            <div
              class="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 mt-1 ml-1 "
            ></div>
          </label>
        </div>
        <p class="text-sm text-gray-500 font-bold mt-2 ml-16">Monthly</p>
      </div>
    </header>
    <section
      class="flex flex-col lg:flex-row items-start items-center lg:justify-center w-full w-full lg:px-10 py-12 "
    >
      <article
        class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg"
      >
        <h5 class="font-bold text-base">Basic</h5>
        <h2 class="pb-4 flex justify-center font-bold border-b border-gray-300">
          <span class="text-3xl mt-6 mr-1">$</span
          ><span class="text-6xl"> 199.99</span>
        </h2>
        <ul class="text-sm font-bold">
          <li class="pt-4 pb-4 border-b border-gray-300">500 GB Storage</li>
          <li class="pt-3 pb-4 border-b border-gray-300">2 Users Allowed</li>
          <li class="pt-4 pb-4 border-b border-gray-300">Send up to 3 GB</li>
        </ul>
        <button
          class=" uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 font-bold text-primary-very-light rounded-md"
          style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);"
        >
          Learn More
        </button>
      </article>
      <article
        class="lg:w-custom w-4/5 mb-10 px-6 py-16 lg:-mt-6 text-white text-center rounded-lg"
        style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);"
      >
        <h5 class="font-bold text-base ">Professional</h5>
        <h2
          class="font-bold pb-4 mt-2 border-b border-gray-100 flex justify-center"
        >
          <span class="text-3xl mt-6 mr-1">$</span
          ><span class="text-6xl "> 249.99</span>
        </h2>
        <ul class=" text-sm font-bold">
          <li class="pt-4 pb-4 border-b border-gray-200">1 TB Storage</li>
          <li class="pt-4 pb-4 border-b border-gray-200">5 Users Allowed</li>
          <li class="pt-4 pb-4 border-b border-gray-200">Send up to 10 GB</li>
        </ul>
        <button
          class="uppercase text-center text-sm mt-10 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold bg-primary-very-light text-primary-blue"
        >
          Learn More
        </button>
      </article>
      <article
        class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg"
      >
        <h5 class="font-bold text-base">Master</h5>
        <h2 class="flex justify-center pb-4 font-bold border-b border-gray-200">
          <span class="text-3xl mt-6 mr-1">$</span
          ><span class="text-6xl">399.99</span>
        </h2>
        <ul class="text-sm font-bold">
          <li class="pt-4 pb-4 border-b border-gray-200">2 TB Storage</li>
          <li class="pt-4 pb-4 border-b border-gray-200">10 Users Allowed</li>
          <li class="pt-4 pb-4 border-b border-gray-200">Send up to 20 GB</li>
        </ul>
        <button
          class="uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold text-primary-very-light"
          style="background-image:linear-gradient(90deg, #a3a8f0 0%, #696fdd 100%);"
        >
          Learn More
        </button>
      </article>
    </section>
  </body>
</html>

Conclusion

In this article, we explored how to build a responsive pricing component with Tailwind CSS.

Tailwind CSS really makes building and prototyping things a breeze. We could further build this component by extracting duplicate utility classes to a component such as the styles in our article tag.

You can check out the repository for this article on Github, you can also check out the hosted demo here. Tailwind’s documentation is well detailed and the screencasts are also good resources to learn more about the framework and how to get you started.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — .

Anjolaoluwa Adebayo-Oyetoro Maker. Writes sometimes. playful most times. loves beautiful UIs

Leave a Reply