Published on

Learn How To Make A Simple Pricing With Tailwind CSS Like an Expert

Simple Pricing

As a FrontEnd technology blogger, it is important to keep up with the latest trends and tools in the industry. One such tool that has gained popularity in recent years is Tailwind CSS. In this article, we will learn how to create a simple pricing UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style HTML elements. With Tailwind CSS, you can create complex layouts and designs without writing any custom CSS. It is highly customizable and can be used with any JavaScript framework or library.

The description of Simple Pricing UI component

A simple pricing UI component is a common feature on many websites. It usually consists of three or more pricing plans, each with different features and prices. The component is designed to help users compare the different plans and choose the one that best suits their needs.

Why use Tailwind CSS to create a Simple Pricing UI component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a simple pricing UI component quickly and easily. With Tailwind CSS, you don't have to write any custom CSS, which saves time and effort. Additionally, Tailwind CSS is highly customizable, so you can easily adjust the component to fit your specific needs.

The preview of Simple Pricing UI component

To create a simple pricing UI component with Tailwind CSS, we will use a combination of HTML and CSS classes. The component will consist of three pricing plans, each with different features and prices.

Free download of the Simple Pricing's source code

The source code of Simple Pricing UI component

To create the simple pricing UI component, we will use the following HTML and CSS code.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
	<div id="content" class=" flex flex-col">
		<div id="whoobe-x7bdr" class="justify-around p-4 bg-white flex flex-row">
			<div id="whoobe-pqyb1" class="w-full md:w-56 justify-center items-center shadow px-6 py-4 flex flex-col" style="font-family: Montserrat;">
				<h3 class="text-blue-600 text-3xl" id="whoobe-d4an2">
					<b>Free</b>
				</h3>
				<h4 class="mb-4 border-t text-xl" id="whoobe-iagy6">Basic</h4>
				<div class="my-4 text-sm text-left" id="whoobe-d29e3">
                        <ol>
                    <li>
                        <p>Unlimited users</p>
                    </li>
                    <li>
                        <p>Unlimited Bandwidth</p>
                    </li>
                    <li>
                        <p>Free Plugins</p>
                    </li>
		</ol>
			</div>
			<button value="button" class="bg-blue-400 text-base text-white px-4 py-2 rounded hover:bg-blue-700 mt-8" id="whoobe-t9t5l">Buy now</button>
		</div>
		<div id="whoobe-gn7ua" class="w-full md:w-56 justify-center items-center shadow px-6 py-4  flex flex-col" style="font-family: Montserrat;">
			<h3 class="text-blue-600 text-3xl" id="whoobe-shnci">
				<small>$</small>
				<b>9</b>.<small>99</small>
			</h3>
			<h4 class="mb-4 border-t text-xl" id="whoobe-j6nes">Pro</h4>
			<div class="my-4 text-sm" id="whoobe-2i6y3">
				<ol>
					<li>
						<p>Unlimited users</p>
					</li>
					<li>
						<p>Unlimited Bandwidth</p>
					</li>
					<li>
						<p>Free Plugins</p>
					</li>
				</ol>
			</div>
			<button value="button" class="bg-blue-400 text-base text-white px-4 py-2 rounded hover:bg-blue-700 mt-8" id="whoobe-8gxqb">Buy now</button>
		</div>
		<div id="whoobe-yuk4l" class="w-full md:w-56 justify-center items-center shadow px-6 py-4  flex flex-col" style="font-family: Montserrat;">
			<h3 class="text-blue-600 text-3xl" id="whoobe-upam2">
				<small>$</small>
				<b>99</b>.<small>00</small>
			</h3>
			<h4 class="mb-4 border-t text-xl" id="whoobe-kx8vq">Enterprise</h4>
			<div class="my-4 text-sm" id="whoobe-hxm5r">
				<ol>
			<li>
				<p>Unlimited users</p>
			</li>
			<li>
				<p>Unlimited Bandwidth</p>
			</li>
			<li>
				<p>Free Plugins</p>
			</li>
		</ol>
</div>
<button value="button" class="bg-blue-400 text-base text-white px-4 py-2 rounded hover:bg-blue-700 mt-8" id="whoobe-e3a70">Buy now</button>
</div>
</div>
</div>

How to create a Simple Pricing with Tailwind CSS?

To create a simple pricing UI component with Tailwind CSS, follow these steps:

Step 1: Set up your HTML structure

Start by creating the HTML structure for the pricing component. In this example, we will use a simple unordered list to display the pricing plans.

<ul class="flex justify-center">
  <li class="w-1/3 px-4 py-6 text-center">
    <!-- Pricing plan 1 -->
  </li>
  <li class="w-1/3 px-4 py-6 text-center">
    <!-- Pricing plan 2 -->
  </li>
  <li class="w-1/3 px-4 py-6 text-center">
    <!-- Pricing plan 3 -->
  </li>
</ul>

Step 2: Style the pricing plans

Next, we will use Tailwind CSS classes to style each pricing plan. We will use the bg-white class to set the background color to white, and the shadow-lg class to add a shadow effect. We will also use the rounded-lg class to round the corners of the pricing plan.

<ul class="flex justify-center">
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <!-- Pricing plan 1 -->
  </li>
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <!-- Pricing plan 2 -->
  </li>
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <!-- Pricing plan 3 -->
  </li>
</ul>

Step 3: Add pricing plan details

Now, we will add the details for each pricing plan. We will use the text-2xl class to set the font size to 2xl, and the font-bold class to make the text bold. We will also use the text-gray-700 class to set the text color to gray.

<ul class="flex justify-center">
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <h2 class="text-2xl font-bold text-gray-700">Basic</h2>
    <p class="mt-4">$9.99/month</p>
    <ul class="mt-4">
      <li class="flex items-center">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">10 GB Storage</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">1 TB Bandwidth</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">5 Email Accounts</span>
      </li>
    </ul>
    <button class="mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full">Sign Up</button>
  </li>
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <h2 class="text-2xl font-bold text-gray-700">Pro</h2>
    <p class="mt-4">$19.99/month</p>
    <ul class="mt-4">
      <li class="flex items-center">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">50 GB Storage</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">5 TB Bandwidth</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">10 Email Accounts</span>
      </li>
    </ul>
    <button class="mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full">Sign Up</button>
  </li>
  <li class="w-1/3 px-4 py-6 text-center bg-white shadow-lg rounded-lg">
    <h2 class="text-2xl font-bold text-gray-700">Premium</h2>
    <p class="mt-4">$29.99/month</p>
    <ul class="mt-4">
      <li class="flex items-center">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">100 GB Storage</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">10 TB Bandwidth</span>
      </li>
      <li class="flex items-center mt-2">
        <svg class="w-4 h-4 fill-current text-green-500 mr-2" viewBox="0 0 20 20">
          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
        </svg>
        <span class="text-gray-700">Unlimited Email Accounts</span>
      </li>
    </ul>
    <button class="mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full">Sign Up</button>
  </li>
</ul>

Step 4: Customize the component

Tailwind CSS provides a wide range of classes that can be used to customize the pricing component further. For example, you can change the font size, font color, and background color of the pricing plans. You can also add additional features and adjust the layout to fit your specific needs.

Conclusion

In this article, we learned how to create a simple pricing UI component using Tailwind CSS. We saw how Tailwind CSS provides a set of pre-defined CSS classes that can be used to style HTML elements quickly and easily. We also saw how to customize the component further using additional Tailwind CSS classes. With Tailwind CSS, creating complex layouts and designs has never been easier.