Published on

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

Tags
Stripe pricing panel clone

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Stripe pricing panel clone ui component

A clone of the pricing panel found on the stripe pricing page: stripe.com/gb/pricing

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

  • It can make the building process of Stripe pricing panel clone ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Stripe pricing panel clone component file.

The preview of Stripe pricing panel clone ui component

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

The source code of Stripe pricing panel clone ui component

<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?

Install tailwind css of verion 1.0.4

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.0.4

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to create a Stripe pricing panel clone component

  • max-w-6xl
  • mx-auto
  • my-12
  • bg-gray-300
  • px-8
  • relative
  • block
  • md:flex
  • w-full
  • md:w-1/2
  • z-1
  • bg-gray-100
  • overflow-hidden
  • text-lg
  • text-green-500
  • p-8
  • text-center
  • border-b
  • border-gray-200
  • sm:flex
  • md:block
  • lg:flex
  • mt-8
  • sm:m-8
  • md:m-0
  • md:mt-8
  • lg:m-8
  • inline-flex
  • text-3xl
  • text-xl
  • text-gray-600
  • ml-2
  • text-sm
  • mt-2
  • mt-4
  • mb-8
  • md:mt-4
  • md:mb-8
  • flex
  • mt-3
  • bg-green-200
  • p-2
  • text-green-700
  • w-4
  • h-4
  • text-gray-700
  • ml-3
  • bg-gray-200
  • hover:bg-gray-300
  • text-md
  • text-gray-800
  • mt-16
  • z-0
  • md:px-0
  • md:py-16
  • bg-blue-900
  • text-white
  • border-blue-800
  • sm:text-md
  • max-w-sm
  • text-blue-200
  • lg:px-0
  • mx-8
  • lg:mx-16
  • flex-wrap
  • w-1/2
  • p-4
  • border-r
  • bg-blue-800
  • hover:bg-blue-700
  • text-gray-300

71 steps to create a Stripe pricing panel clone component with Tailwind CSS

  1. Set the maximum width/height of an element using the max-w-6xl utilities.

  2. Control the horizontal margin of an element to auto using the mx-auto utilities.

  3. Control the vertical margin of an element to 3rem using the my-12 utilities.

  4. Control the background color of an element to gray-300 using the bg-gray-300 utilities.

  5. Control the horizontal padding of an element to 2rem using the px-8 utilities.

  6. Use relative to position an element according to the normal flow of the document.

  7. Use inline utilities to put the element on its own line and fill its parent.

  8. Use flex to create a block-level flex container at only medium screen sizes.

  9. Use w-full to set an element to a 100% based width.

  10. Use md:w-1/2 to set an element to a fixed width(1/2) at only medium screen sizes.

  11. Control the stack order (or three-dimensional positioning) of an element to 1 in Tailwind, regardless of order it has been displayed, using the z-1 utilities.

  12. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  13. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  14. Control the text color of an element to lg using the text-lg utilities.

  15. Control the text color of an element to green-500 using the text-green-500 utilities.

  16. Control the padding on all sides of an element to 2rem using the p-8 utilities.

  17. Control the text color of an element to center using the text-center utilities.

  18. Control the border color of an element to b using the border-b utilities.

  19. Control the border color of an element to gray-200 using the border-gray-200 utilities.

  20. Use flex to create a block-level flex container at only small screen sizes.

  21. Use inline utilities to put the element on its own line and fill its parent at only medium screen sizes.

  22. Use flex to create a block-level flex container at only large screen sizes.

  23. Control the margin on top side of an element to 2rem using the mt-8 utilities.

  24. Control the margin on all sides of an element to 2rem at only small screen sizes using the sm:m-8 utilities.

  25. Control the margin on all sides of an element to 0rem at only medium screen sizes using the md:m-0 utilities.

  26. Control the margin on top side of an element to 2rem at only medium screen sizes using the md:mt-8 utilities.

  27. Control the margin on all sides of an element to 2rem at only large screen sizes using the lg:m-8 utilities.

  28. Use inline-flex to create an inline flex container that flows with text.

  29. Control the text color of an element to 3xl using the text-3xl utilities.

  30. Control the text color of an element to xl using the text-xl utilities.

  31. Control the text color of an element to gray-600 using the text-gray-600 utilities.

  32. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  33. Control the text color of an element to sm using the text-sm utilities.

  34. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  35. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  36. Control the margin on bottom side of an element to 2rem using the mb-8 utilities.

  37. Control the margin on top side of an element to 1rem at only medium screen sizes using the md:mt-4 utilities.

  38. Control the margin on bottom side of an element to 2rem at only medium screen sizes using the md:mb-8 utilities.

  39. Use flex to create a block-level flex container.

  40. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  41. Control the background color of an element to green-200 using the bg-green-200 utilities.

  42. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  43. Control the text color of an element to green-700 using the text-green-700 utilities.

  44. Use w-4 to set an element to a fixed width(1rem).

  45. Use h-4 to set an element to a fixed height(1rem).

  46. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  47. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  48. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  49. Control the background color of an element to gray-300 using the hover:bg-gray-300 utilities on hover.

  50. Control the text color of an element to md using the text-md utilities.

  51. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  52. Control the margin on top side of an element to 4rem using the mt-16 utilities.

  53. Control the stack order (or three-dimensional positioning) of an element to 0 in Tailwind, regardless of order it has been displayed, using the z-0 utilities.

  54. Control the horizontal padding of an element to 0rem at only medium screen sizes using the md:px-0 utilities.

  55. Control the vertical padding of an element to 4rem at only medium screen sizes using the md:py-16 utilities.

  56. Control the background color of an element to blue-900 using the bg-blue-900 utilities.

  57. Control the text color of an element to white using the text-white utilities.

  58. Control the border color of an element to blue-800 using the border-blue-800 utilities.

  59. Control the text color of an element to md at only small screen sizes using the sm:text-md utilities.

  60. Set the maximum width/height of an element using the max-w-sm utilities.

  61. Control the text color of an element to blue-200 using the text-blue-200 utilities.

  62. Control the horizontal padding of an element to 0rem at only large screen sizes using the lg:px-0 utilities.

  63. Control the horizontal margin of an element to 2rem using the mx-8 utilities.

  64. Control the horizontal margin of an element to 4rem at only large screen sizes using the lg:mx-16 utilities.

  65. Use flex to create a block-level flex container.

  66. Use w-1/2 to set an element to a fixed width(1/2).

  67. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  68. Control the border color of an element to r using the border-r utilities.

  69. Control the background color of an element to blue-800 using the bg-blue-800 utilities.

  70. Control the background color of an element to blue-700 using the hover:bg-blue-700 utilities on hover.

  71. Control the text color of an element to gray-300 using the text-gray-300 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Stripe pricing panel clone components, learn and follow along to implement your own components.