Home
Matti
Pricing

Pricing

Looks better with in [Line-2] with: md:w-3/5

This tailwind example is contributed by Matti, on 04-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Matti

739

Fork Fullscreen

<section class="w-full bg-white dark:bg-gray-700">
  <div class="w-full md:w-4/5 mx-auto">
    <div class="w-full flex flex-col text-center pt-12 md:pt-24">
      <h1 class="text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
          The <span class="text-emerald-600"> Pricing</span>
      </h1>
      <p class="w-full px-[12%] text-normal md:text-xl whitespace-pre-line dark:text-white">
        Here on <span class="text-emerald-600">tailwindflex</span>.com you've all you need to build your own <br class="hidden lg:inline" /> components, new templates and share your fantastic results with everyone &#8212; if you want
      </p>
    </div>
    <div class="w-full pt-16 flex flex-col md:flex-row items-center">
      <div class="rounded-md w-[90%] mx-auto md:w-min-1/3 mx-auto items-center border border-gray-300 py-16 px-4 xl:px-24 mb-4 flex flex-col">
        <p class="text-gray-700 dark:text-gray-300 text-2xl">Basic</p>
        <h1 class="font-semibold text-6xl pt-2 pb-3 dark:text-white">$0</h1>
        <p class="text-gray-500">per month</p>
        <ul class="mt-10 list-image-[url('./YOU-CAN-SET-HERE-YOUR-ARROW-SVG-OR-IMG')] dark:text-gray-300">
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Access to all modules</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Community support</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Online Playground</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Custom you profile</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Personal subdomain</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Points to earn and use </li>
        </ul>
        <button class="mt-6 bg-gray-100 rounded-md py-2 px-4 text-black text-xl">Request Access</button>
        <small class="text-sm mt-2 dark:text-gray-300">It's free.</small>
      </div>
      <div class="rounded-md w-[90%] mx-auto md:w-min-1/3 bg-emerald-50/50 dark:bg-gray-50 mx-auto md:!mx-4 items-center border border-gray-300 py-24 px-4 xl:px-24 mb-4 flex flex-col">
        <p class="text-gray-700 dark:text-gray-500 text-2xl">Premium</p>
        <h1 class="font-semibold text-6xl pt-2 pb-3 dark:text-black">$25</h1>
        <p class="text-gray-400">per month</p>
        <ul class="mt-10 list-image-[url('./YOU-CAN-SET-HERE-YOUR-ARROW-SVG-OR-IMG')] dark:text-gray-300">
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Access to all modules</li>
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Community support</li>
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Online Playground</li>
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Custom you profile</li>
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Personal subdomain</li>
          <li class="mb-2 dark:text-gray-600"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Points to earn and use </li>
        </ul>
        <button class="mt-6 bg-emerald-500 rounded-md py-2 px-4 text-white text-xl">Request Access</button>
        <small class="text-sm mt-2 dark:text-gray-500">Perfect, all inclusive.</small>
      </div>
      <div class="rounded-md w-[90%] mx-auto md:w-min-1/3 mx-auto items-center border border-gray-300 py-16 px-4 xl:px-24 mb-4 flex flex-col">
        <p class="text-gray-700 dark:text-gray-300 text-2xl">Standard</p>
        <h1 class="font-semibold text-6xl pt-2 pb-3 dark:text-white">$12</h1>
        <p class="text-gray-500">per month</p>
        <ul class="mt-10 list-image-[url('./YOU-CAN-SET-HERE-YOUR-ARROW-SVG-OR-IMG')] dark:text-gray-300">
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Access to all modules</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Community support</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Online Playground</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Custom you profile</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Personal subdomain</li>
          <li class="mb-2"><img src="https://www.svgrepo.com/show/453892/checkmark.svg" class="inline h-6 w-6 text-gray-500 mr-3 -mt-1"> Points to earn and use </li>
        </ul>
        <button class="mt-6 bg-gray-200 rounded-md py-2 px-4 text-black text-xl">Request Access</button>
        <small class="text-sm mt-2 dark:text-gray-300">Creators on the way.</small>
      </div>
    </div>
  </div>
</sector>

Related Examples

Pricing Card

Author:
Amit Pachange

2 years ago

12.9k
Horizontal pricing card

Author:
Anonymous

1 month ago

73
Pricing cards in pair

Author:
Santiago Hernandez

11 months ago

1.5k
Pricing card for subscription

Author:
Task Master

2 years ago

10.2k
Pricing card

Author:
Task Master

2 years ago

8.4k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.1k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

4.8k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

5 days ago

23
Pricing cards in pair

Author:
Nour Haider

1 year ago

12.6k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

11.7k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.1k
Pricing card with CTA

Author:
Laurits

2 years ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components