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

565

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 cards
pricing section with 3 cards

Author:
Noob

2 years ago

10.7k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

2 months ago

392
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.4k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

9.6k
Pricing cards in pair

Author:
Santiago Hernandez

9 months ago

1.3k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

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

Author:
Mehmet Kaplan

8 months ago

2k
Subscription
Subscription list

Author:
Abhiraj

1 hour ago

1
Semi transparent pricing cards

Author:
Anonymous

1 year ago

7.5k
Pricing card
Reveal details on hover

Author:
Anonymous

10 months ago

2.4k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

3.4k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

1 year ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components