Published on

The Ultimate Guide To Help You Create A Stripe pricing panel clone With Tailwind CSS

Tags
Stripe pricing panel clone

Stripe is a popular payment gateway that allows businesses to accept payments online. One of the most important features of Stripe is its pricing panel, which allows businesses to showcase their pricing plans to potential customers. In this article, we will show you how to create a Stripe pricing panel clone using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom designs without writing any CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is gaining popularity among developers due to its flexibility and ease of use.

The description of Stripe pricing panel clone ui component

The Stripe pricing panel clone is a UI component that displays pricing plans for a product or service. It typically includes the name of the plan, the price, and a list of features. The pricing panel is an essential component for any business that wants to showcase its pricing plans to potential customers.

Why use Tailwind CSS to create a Stripe pricing panel clone ui component?

Tailwind CSS provides a set of pre-defined classes that you can use to style your HTML elements. This makes it easy to create custom designs without writing any CSS. Tailwind CSS also provides a responsive design system that allows you to create designs that work on different screen sizes.

The preview of Stripe pricing panel clone ui component

To create a Stripe pricing panel clone, we will use Tailwind CSS to style our HTML elements. We will create a responsive design that works on different screen sizes.

Free download of the Stripe pricing panel clone's source code

The source code of Stripe pricing panel clone ui component

To create a Stripe pricing panel clone, we will use HTML and Tailwind CSS. We will create a container div to hold our pricing plans. Inside the container div, we will create three pricing plan divs. Each pricing plan div will contain the name of the plan, the price, and a list of features. We will use Tailwind CSS to style our HTML elements.

<style>
  body {
    background: #e2e8f0;
  }
    *:hover {
      transition: all 150ms ease-in;
    }
  </style>
  
  <div class="antialiased max-w-6xl mx-auto my-12 bg-gray-300 px-8">
    
  
    <div class="relative block md:flex items-center">
      <div class="w-full md:w-1/2 relative z-1 bg-gray-100 rounded shadow-lg overflow-hidden">
        <div class="text-lg font-medium text-green-500 uppercase p-8 text-center border-b border-gray-200 tracking-wide">Pay as you go</div>
        <div class="block sm:flex md:block lg:flex items-center justify-center">
          <div class="mt-8 sm:m-8 md:m-0 md:mt-8 lg:m-8 text-center">
            <div class="inline-flex items-center">
              <span class="text-3xl font-medium">1.4%</span>
              <span class="text-xl text-gray-600 ml-2">+</span>
              <span class="text-xl ml-2">20p</span>
            </div>
            <span class="block text-sm text-gray-600 mt-2">for European cards</span>
          </div>
          <div class="mt-4 mb-8 sm:m-8 md:m-0 md:mt-4 md:mb-8 lg:m-8 text-center">
            <div class="inline-flex items-center">
              <span class="text-3xl font-medium">2.9%</span>
              <span class="text-xl text-gray-600 ml-2">+</span>
              <span class="text-xl ml-2">20p</span>
            </div>
            <span class="block text-sm text-gray-600 mt-2">for non-European cards</span>
          </div>
        </div>
        <div class="flex justify-center mt-3">
          <ul>
            <li class="flex items-center">
              <div class="bg-green-200 rounded-full p-2 fill-current text-green-700">
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-umbrella"><path class="primary" d="M11 3.05V2a1 1 0 0 1 2 0v1.05A10 10 0 0 1 22 13c0 1.33-2 1.33-2 0a2 2 0 1 0-4 0c0 1.33-2 1.33-2 0a2 2 0 1 0-4 0c0 1.33-2 1.33-2 0a2 2 0 1 0-4 0c0 1.33-2 1.33-2 0a10 10 0 0 1 9-9.95z"/><path class="secondary" d="M11 14a1 1 0 0 1 2 0v5a3 3 0 0 1-6 0 1 1 0 0 1 2 0 1 1 0 0 0 2 0v-5z"/></svg>
              </div>
              <span class="text-gray-700 text-lg ml-3">No setup, monthly, or hidden fees</span>
            </li>
            <li class="flex items-center mt-3">
              <div class="bg-green-200 rounded-full p-2 fill-current text-green-700">
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-shopping-bag"><path class="primary" d="M5 8h14a1 1 0 0 1 1 .92l1 12A1 1 0 0 1 20 22H4a1 1 0 0 1-1-1.08l1-12A1 1 0 0 1 5 8z"/><path class="secondary" d="M9 10a1 1 0 0 1-2 0V7a5 5 0 1 1 10 0v3a1 1 0 0 1-2 0V7a3 3 0 0 0-6 0v3z"/></svg>
              </div>
              <span class="text-gray-700 text-lg ml-3">Pay only for what you use</span>
            </li>
            <li class="flex items-center mt-3">
              <div class="bg-green-200 rounded-full p-2 fill-current text-green-700">
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-pie-chart"><path class="primary" d="M14 13h6.78a1 1 0 0 1 .97 1.22A10 10 0 1 1 9.78 2.25a1 1 0 0 1 1.22.97V10a3 3 0 0 0 3 3z"/><path class="secondary" d="M20.78 11H14a1 1 0 0 1-1-1V3.22a1 1 0 0 1 1.22-.97c3.74.85 6.68 3.79 7.53 7.53a1 1 0 0 1-.97 1.22z"/></svg>
              </div>
              <span class="text-gray-700 text-lg ml-3">Real-time fee reporting</span>
            </li>
          </ul>
        </div>
        <a class="block flex items-center justify-center bg-gray-200 hover:bg-gray-300 p-8 text-md font-semibold text-gray-800 uppercase mt-16" href="#">
          <span>Create account</span>
          <span class="font-medium text-gray-700 ml-2"></span>
        </a>
      </div>
      <div class="w-full md:w-1/2 relative z-0 px-8 md:px-0 md:py-16">
        <div class="bg-blue-900 text-white rounded-b md:rounded-b-none md:rounded-r shadow-lg overflow-hidden">
          <div class="text-lg font-medium uppercase p-8 text-center border-b border-blue-800 tracking-wide">Enterprise</div>
          <div class="text-center text-sm sm:text-md max-w-sm mx-auto mt-8 text-blue-200 px-8 lg:px-0">
            Stripe offers everything needed to run an online business at scale. Get in touch for details.
          </div>
          <div class="mt-8 border border-blue-800 mx-8 lg:mx-16 flex flex-wrap">
            <div class="flex items-center justify-center w-1/2 text-center p-4 border-r border-b border-blue-800">Account management</div>
            <div class="flex items-center justify-center w-1/2 text-center p-4 border-b border-blue-800">Volume discounts</div>
            <div class="flex items-center justify-center w-1/2 text-center p-4 border-r border-blue-800">Migration assistance</div>
            <div class="flex items-center justify-center w-1/2 text-center p-4">Dedicated support</div>
          </div>
          <a class="block flex items-center justify-center bg-blue-800 hover:bg-blue-700 p-8 text-md font-semibold text-gray-300 uppercase mt-8" href="#">
            <span>Contact sales</span>
            <span class="font-medium text-gray-300 ml-2"></span>
          </a>
        </div>
      </div>
    </div>
      
    
  </div>

How to create a Stripe pricing panel clone with Tailwind CSS?

To create a Stripe pricing panel clone with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the necessary HTML elements.
  2. Add the Tailwind CSS CDN to your HTML file.
  3. Create a container div to hold your pricing plans.
  4. Create three pricing plan divs inside the container div.
  5. Add the name of the plan, the price, and a list of features to each pricing plan div.
  6. Use Tailwind CSS to style your HTML elements.

Here is the HTML code for our Stripe pricing panel clone:

<div class="container mx-auto flex flex-wrap py-4">
  <div class="w-full md:w-1/3 flex flex-col p-4">
    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
      <div class="w-full font-bold text-xl text-gray-900 px-6 py-4">
        Basic
      </div>
      <div class="flex items-center justify-center">
        <div class="font-bold text-3xl text-gray-900">$10</div>
        <div class="text-gray-600 ml-1">/month</div>
      </div>
      <div class="px-6 py-4">
        <ul>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">5 GB Storage</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">10 Email Accounts</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">3 Domains</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pt-4 pb-2">
        <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
        >
          Sign Up
        </button>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 flex flex-col p-4">
    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
      <div class="w-full font-bold text-xl text-gray-900 px-6 py-4">
        Pro
      </div>
      <div class="flex items-center justify-center">
        <div class="font-bold text-3xl text-gray-900">$20</div>
        <div class="text-gray-600 ml-1">/month</div>
      </div>
      <div class="px-6 py-4">
        <ul>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">10 GB Storage</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">20 Email Accounts</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">5 Domains</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pt-4 pb-2">
        <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
        >
          Sign Up
        </button>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 flex flex-col p-4">
    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
      <div class="w-full font-bold text-xl text-gray-900 px-6 py-4">
        Premium
      </div>
      <div class="flex items-center justify-center">
        <div class="font-bold text-3xl text-gray-900">$30</div>
        <div class="text-gray-600 ml-1">/month</div>
      </div>
      <div class="px-6 py-4">
        <ul>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">20 GB Storage</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">50 Email Accounts</span>
          </li>
          <li class="flex items-center">
            <div class="rounded-full p-2 fill-current text-green-700">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M0 11l2-2 5 5L18 3l2 2L7 18z"
                />
              </svg>
            </div>
            <span class="ml-3">10 Domains</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pt-4 pb-2">
        <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
        >
          Sign Up
        </button>
      </div>
    </div>
  </div>
</div>

Conclusion

Creating a Stripe pricing panel clone with Tailwind CSS is a straightforward process that can be completed in a few simple steps. By using Tailwind CSS, you can quickly create custom designs without writing any CSS. We hope this guide has been helpful in showing you how to create a Stripe pricing panel clone with Tailwind CSS.