Published on

Learn How To Create A Tailwind Pricing Tables With Tailwind CSS from the Pros

Tailwind Pricing Tables

If you are looking for a way to create beautiful pricing tables for your website, you might want to consider using Tailwind CSS. In this article, we will show you how to create a Tailwind Pricing Tables UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can create complex layouts and designs without writing custom CSS code.

The description of Tailwind Pricing Tables UI component

A pricing table is a UI component that displays different pricing plans for a product or service. It usually includes features, prices, and a call-to-action button. A well-designed pricing table can help users make informed decisions about which plan to choose.

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

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your pricing table. This makes it easy to create a consistent and visually appealing design. Additionally, Tailwind CSS is highly customizable, which means you can easily modify the styles to match your brand's colors and typography.

The preview of Tailwind Pricing Tables UI component

To create a Tailwind Pricing Tables UI component, we will use a combination of HTML and Tailwind CSS classes. Here is a preview of what the final pricing table will look like:

Free download of the Tailwind Pricing Tables's source code

The source code of Tailwind Pricing Tables UI component

To create the Tailwind Pricing Tables UI component, we will use the following HTML and Tailwind CSS classes:

<link rel="stylesheet" href="https://cdn.tailgrids.com/tailgrids-fallback.css" />

<!-- ====== Pricing Section Start -->
<section
   class="
   bg-white
   pt-20
   lg:pt-[120px]
   pb-12
   lg:pb-[90px]
   relative
   z-20
   overflow-hidden
   "
   >
   <div class="container">
      <div class="flex flex-wrap -mx-4">
         <div class="w-full px-4">
            <div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[510px]">
               <span class="font-semibold text-lg text-primary mb-2 block">
               Pricing Table
               </span>
               <h2
                  class="
                  font-bold
                  text-3xl
                  sm:text-4xl
                  md:text-[40px]
                  text-dark
                  mb-4
                  "
                  >
                  Our Pricing Plan
               </h2>
               <p class="text-base text-body-color">
                  There are many variations of passages of Lorem Ipsum available
                  but the majority have suffered alteration in some form.
               </p>
            </div>
         </div>
      </div>
      <div class="flex flex-wrap justify-center -mx-4">
         <div class="w-full md:w-1/2 lg:w-1/3 px-4">
            <div
               class="
               bg-white
               rounded-xl
               relative
               z-10
               overflow-hidden
               border border-primary border-opacity-20
               shadow-pricing
               py-10
               px-8
               sm:p-12
               lg:py-10 lg:px-6
               xl:p-12
               mb-10
               "
               >
               <span class="text-primary font-semibold text-lg block mb-4">
               Personal
               </span>
               <h2 class="font-bold text-dark mb-5 text-[42px]">
                  $59
                  <span class="text-base text-body-color font-medium">
                  / year
                  </span>
               </h2>
               <p
                  class="
                  text-base text-body-color
                  pb-8
                  mb-8
                  border-b border-[#F2F2F2]
                  "
                  >
                  Perfect for using in a personal website or a client project.
               </p>
               <div class="mb-7">
                  <p class="text-base text-body-color leading-loose mb-1">
                     1 User
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     All UI components
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Lifetime access
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Free updates
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Use on 1 (one) project
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     3 Months support
                  </p>
               </div>
               <a
                  href="javascript:void(0)"
                  class="
                  w-full
                  block
                  text-base
                  font-semibold
                  text-primary
                  bg-transparent
                  border border-[#D4DEFF]
                  rounded-md
                  text-center
                  p-4
                  hover:text-white hover:bg-primary hover:border-primary
                  transition
                  "
                  >
               Choose Personal
               </a>
               <div>
                  <span class="absolute right-0 top-7 z-[-1]">
                     <svg
                        width="77"
                        height="172"
                        viewBox="0 0 77 172"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
                        <defs>
                           <linearGradient
                              id="paint0_linear"
                              x1="86"
                              y1="0"
                              x2="86"
                              y2="172"
                              gradientUnits="userSpaceOnUse"
                              >
                              <stop stop-color="#3056D3" stop-opacity="0.09" />
                              <stop
                                 offset="1"
                                 stop-color="#C4C4C4"
                                 stop-opacity="0"
                                 />
                           </linearGradient>
                        </defs>
                     </svg>
                  </span>
                  <span class="absolute right-4 top-4 z-[-1]">
                     <svg
                        width="41"
                        height="89"
                        viewBox="0 0 41 89"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle
                           cx="38.9138"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 38.9138 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 38.9138 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 38.9138 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 38.9138 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 38.9138 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 38.9138 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 38.9138 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="1.42021"
                           r="1.42021"
                           transform="rotate(180 38.9138 1.42021)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 26.4157 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 26.4157 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 26.4157 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 26.4157 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 26.4157 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 26.4157 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 26.4157 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 26.4157 1.4202)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 13.9177 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 13.9177 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 13.9177 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 13.9177 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 13.9177 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 13.9177 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 13.9177 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="1.42019"
                           r="1.42021"
                           transform="rotate(180 13.9177 1.42019)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 1.41963 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 1.41963 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 1.41963 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 1.41963 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 1.41963 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 1.41963 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 1.41963 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 1.41963 1.4202)"
                           fill="#3056D3"
                           />
                     </svg>
                  </span>
               </div>
            </div>
         </div>
         <div class="w-full md:w-1/2 lg:w-1/3 px-4">
            <div
               class="
               bg-white
               rounded-xl
               relative
               z-10
               overflow-hidden
               border border-primary border-opacity-20
               shadow-pricing
               py-10
               px-8
               sm:p-12
               lg:py-10 lg:px-6
               xl:p-12
               mb-10
               "
               >
               <span class="text-primary font-semibold text-lg block mb-4">
               Business
               </span>
               <h2 class="font-bold text-dark mb-5 text-[42px]">
                  $199
                  <span class="text-base text-body-color font-medium">
                  / year
                  </span>
               </h2>
               <p
                  class="
                  text-base text-body-color
                  pb-8
                  mb-8
                  border-b border-[#F2F2F2]
                  "
                  >
                  Perfect for using in a Business website or a client project.
               </p>
               <div class="mb-7">
                  <p class="text-base text-body-color leading-loose mb-1">
                     5 Users
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     All UI components
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Lifetime access
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Free updates
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Use on 3 (Three) project
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     4 Months support
                  </p>
               </div>
               <a
                  href="javascript:void(0)"
                  class="
                  w-full
                  block
                  text-base
                  font-semibold
                  text-white
                  bg-primary
                  border border-primary
                  rounded-md
                  text-center
                  p-4
                  hover:bg-opacity-90
                  transition
                  "
                  >
               Choose Business
               </a>
               <div>
                  <span class="absolute right-0 top-7 z-[-1]">
                     <svg
                        width="77"
                        height="172"
                        viewBox="0 0 77 172"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
                        <defs>
                           <linearGradient
                              id="paint0_linear"
                              x1="86"
                              y1="0"
                              x2="86"
                              y2="172"
                              gradientUnits="userSpaceOnUse"
                              >
                              <stop stop-color="#3056D3" stop-opacity="0.09" />
                              <stop
                                 offset="1"
                                 stop-color="#C4C4C4"
                                 stop-opacity="0"
                                 />
                           </linearGradient>
                        </defs>
                     </svg>
                  </span>
                  <span class="absolute right-4 top-4 z-[-1]">
                     <svg
                        width="41"
                        height="89"
                        viewBox="0 0 41 89"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle
                           cx="38.9138"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 38.9138 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 38.9138 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 38.9138 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 38.9138 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 38.9138 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 38.9138 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 38.9138 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="1.42021"
                           r="1.42021"
                           transform="rotate(180 38.9138 1.42021)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 26.4157 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 26.4157 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 26.4157 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 26.4157 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 26.4157 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 26.4157 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 26.4157 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 26.4157 1.4202)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 13.9177 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 13.9177 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 13.9177 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 13.9177 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 13.9177 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 13.9177 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 13.9177 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="1.42019"
                           r="1.42021"
                           transform="rotate(180 13.9177 1.42019)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 1.41963 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 1.41963 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 1.41963 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 1.41963 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 1.41963 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 1.41963 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 1.41963 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 1.41963 1.4202)"
                           fill="#3056D3"
                           />
                     </svg>
                  </span>
               </div>
            </div>
         </div>
         <div class="w-full md:w-1/2 lg:w-1/3 px-4">
            <div
               class="
               bg-white
               rounded-xl
               relative
               z-10
               overflow-hidden
               border border-primary border-opacity-20
               shadow-pricing
               py-10
               px-8
               sm:p-12
               lg:py-10 lg:px-6
               xl:p-12
               mb-10
               "
               >
               <span class="text-primary font-semibold text-lg block mb-4">
               Professional
               </span>
               <h2 class="font-bold text-dark mb-5 text-[42px]">
                  $256
                  <span class="text-base text-body-color font-medium">
                  / year
                  </span>
               </h2>
               <p
                  class="
                  text-base text-body-color
                  pb-8
                  mb-8
                  border-b border-[#F2F2F2]
                  "
                  >
                  Perfect for using in a Professional website or a client project.
               </p>
               <div class="mb-7">
                  <p class="text-base text-body-color leading-loose mb-1">
                     Unlimited Users
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     All UI components
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Lifetime access
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Free updates
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     Use on Unlimited project
                  </p>
                  <p class="text-base text-body-color leading-loose mb-1">
                     12 Months support
                  </p>
               </div>
               <a
                  href="javascript:void(0)"
                  class="
                  w-full
                  block
                  text-base
                  font-semibold
                  text-primary
                  bg-transparent
                  border border-[#D4DEFF]
                  rounded-md
                  text-center
                  p-4
                  hover:text-white hover:bg-primary hover:border-primary
                  transition
                  "
                  >
               Choose Professional
               </a>
               <div>
                  <span class="absolute right-0 top-7 z-[-1]">
                     <svg
                        width="77"
                        height="172"
                        viewBox="0 0 77 172"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
                        <defs>
                           <linearGradient
                              id="paint0_linear"
                              x1="86"
                              y1="0"
                              x2="86"
                              y2="172"
                              gradientUnits="userSpaceOnUse"
                              >
                              <stop stop-color="#3056D3" stop-opacity="0.09" />
                              <stop
                                 offset="1"
                                 stop-color="#C4C4C4"
                                 stop-opacity="0"
                                 />
                           </linearGradient>
                        </defs>
                     </svg>
                  </span>
                  <span class="absolute right-4 top-4 z-[-1]">
                     <svg
                        width="41"
                        height="89"
                        viewBox="0 0 41 89"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >
                        <circle
                           cx="38.9138"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 38.9138 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 38.9138 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 38.9138 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 38.9138 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 38.9138 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 38.9138 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 38.9138 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="38.9138"
                           cy="1.42021"
                           r="1.42021"
                           transform="rotate(180 38.9138 1.42021)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 26.4157 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 26.4157 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 26.4157 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 26.4157 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 26.4157 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 26.4157 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 26.4157 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="26.4157"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 26.4157 1.4202)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 13.9177 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 13.9177 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 13.9177 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 13.9177 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 13.9177 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 13.9177 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 13.9177 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="13.9177"
                           cy="1.42019"
                           r="1.42021"
                           transform="rotate(180 13.9177 1.42019)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="87.4849"
                           r="1.42021"
                           transform="rotate(180 1.41963 87.4849)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="74.9871"
                           r="1.42021"
                           transform="rotate(180 1.41963 74.9871)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="62.4892"
                           r="1.42021"
                           transform="rotate(180 1.41963 62.4892)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="38.3457"
                           r="1.42021"
                           transform="rotate(180 1.41963 38.3457)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="13.634"
                           r="1.42021"
                           transform="rotate(180 1.41963 13.634)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="50.2754"
                           r="1.42021"
                           transform="rotate(180 1.41963 50.2754)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="26.1319"
                           r="1.42021"
                           transform="rotate(180 1.41963 26.1319)"
                           fill="#3056D3"
                           />
                        <circle
                           cx="1.41963"
                           cy="1.4202"
                           r="1.42021"
                           transform="rotate(180 1.41963 1.4202)"
                           fill="#3056D3"
                           />
                     </svg>
                  </span>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- ====== Pricing Section End -->

How to create a Tailwind Pricing Tables with Tailwind CSS?

Now that we have an idea of what the final pricing table will look like and the code we will use, let's dive into the steps to create a Tailwind Pricing Tables UI component.

Step 1: Set up the HTML structure

The first step is to set up the HTML structure for the pricing table. We will use a simple table structure with three columns: Plan, Features, and Price. Here is the HTML code:

<div class="container mx-auto">
  <table class="table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2"></th>
        <th class="px-4 py-2">Features</th>
        <th class="px-4 py-2">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border px-4 py-2">Basic</td>
        <td class="border px-4 py-2">Feature 1, Feature 2, Feature 3</td>
        <td class="border px-4 py-2">$10/month</td>
      </tr>
      <tr class="bg-gray-100">
        <td class="border px-4 py-2">Pro</td>
        <td class="border px-4 py-2">Feature 1, Feature 2, Feature 3, Feature 4</td>
        <td class="border px-4 py-2">$20/month</td>
      </tr>
      <tr>
        <td class="border px-4 py-2">Enterprise</td>
        <td class="border px-4 py-2">Feature 1, Feature 2, Feature 3, Feature 4, Feature 5</td>
        <td class="border px-4 py-2">$30/month</td>
      </tr>
    </tbody>
  </table>
</div>

Step 2: Style the pricing table with Tailwind CSS

Now that we have the HTML structure in place, we can start styling the pricing table using Tailwind CSS classes. Here is the CSS code:

.container {
  max-width: 960px;
}

.table-auto {
  width: 100%;
}

th,
td {
  text-align: left;
}

th {
  border-bottom-width: 2px;
}

td {
  border-bottom-width: 1px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

In this code, we set the max-width of the container to 960px and the width of the table to 100%. We also align the text to the left and set the border widths for the table cells. Finally, we add a background color to every other row to make the pricing table easier to read.

Step 3: Customize the pricing table to match your brand

Tailwind CSS makes it easy to customize the styling of the pricing table to match your brand's colors and typography. You can modify the CSS classes to change the font size, font family, and color of the pricing table. Here is an example of how you can modify the CSS classes:

.container {
  max-width: 960px;
}

.table-auto {
  width: 100%;
}

th,
td {
  text-align: left;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  color: #333333;
}

th {
  border-bottom-width: 2px;
}

td {
  border-bottom-width: 1px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

In this code, we changed the font size to 16px, the font family to 'Open Sans', and the color to #333333. You can modify these values to match your brand's typography.

Conclusion

In this article, we showed you how to create a Tailwind Pricing Tables UI component using Tailwind CSS. We covered the benefits of using Tailwind CSS for pricing tables, provided a preview of the final pricing table, and walked through the steps to create the pricing table. With Tailwind CSS, you can create beautiful and customizable pricing tables for your website.