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.7k 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

Card template

Raul antonio de la cruz hernandez

9 months ago

794
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
Pricing card

Task Master

3 years ago

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

Mehmet Kaplan

2 years ago

4.4k
Pricing Card

Amit Pachange

3 years ago

13.9k
Basic pricing card

Sienna

3 years ago

11.3k
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
Subscription Plan Section
Clean and modern Subscription Plan section

Nikolai

2 years ago

3.4k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

1k
Card template

Raul antonio de la cruz hernandez

9 months ago

539
Une structure simple et transparente. pricing
Une structure simple et transparente. pricing

Omer fils ELENGA

7 months ago

483
Paiement Mobile MTN
Paiement Mobile MTN

Omer fils ELENGA

7 months ago

484