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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Matti

Tailwind v3.4 1.6k 4

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 Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

SHARIFUL ISLAM

1 year ago

1.9k
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

2 years ago

10.9k
Pricing card for subscription

Task Master

3 years ago

11.9k
AgriSmart
used in agriculture for making profit and good production

INGRIDE MUZIRANENGE

10 months ago

914
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
Game
prayer game candle game light candles with your prayers

Anonymous

1 year ago

1.5k
Pricing card

Task Master

3 years ago

9.7k
Basic pricing card

Sienna

3 years ago

12.1k
Simple pricing card
minimal pricing card

Anonymous

3 years ago

9.7k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2k
Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k