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

946

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 in pair

Author:
Nour Haider

2 years ago

13.3k
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
3 pricing cards

Author:
Laurits

2 years ago

14.2k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

3 months ago

434
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

5 months ago

716
Pricing card

Author:
Piet Vriend

2 years ago

8.7k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.4k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.5k
Pricing card

Author:
Sophia Baker

2 years ago

8.5k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

1 year ago

8.4k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

3 months ago

321
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components