Home
Paul Intay
Modern pricing cards

Modern pricing cards

Minimal and clean pricing cards

This tailwind example is contributed by Paul Intay, on 14-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Paul Intay

632

Fork Fullscreen

<section class="py-12 bg-gray-50 font-poppins dark:bg-gray-800">
  <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
        Pricing Plans
      </h2>
      <p class="mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">
        Choose the plan that's right for you.
      </p>
    </div>

<div
      class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-3">
      <div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Basic</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$19</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">10 users included</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">2 GB of storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Email support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Basic</a>
        </div>
      </div>

<div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Pro</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$49</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">25 users included</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">10 GB of storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Email and phone support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Pro</a>
        </div>
      </div>

<div
        class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-200 dark:divide-gray-700">
        <div class="px-6 py-8">
          <h3 class="text-center text-2xl font-semibold text-gray-900 dark:text-white">Enterprise</h3>
          <div class="mt-4 flex items-center justify-center">
            <span class="px-3 text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white">$99</span>
            <span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span>
          </div>
        </div>
        <div class="px-6 pt-6 pb-8">
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Unlimited users</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Unlimited storage</span>
            </li>
            <li class="flex items-center space-x-3">
              <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              <span class="text-base font-medium text-gray-500 dark:text-gray-200">Dedicated support</span>
            </li>
          </ul>
          <a href="#"
            class="block w-full px-6 py-4 mt-8 text-center text-base font-medium text-white bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-700 rounded-md">Start
            Enterprise</a>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.1k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
bara masalma

4 months ago

702
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

11.9k
Card
Card

Author:
Aman kumar

9 months ago

908
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 card
Reveal details on hover

Author:
Anonymous

1 year ago

2.9k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

10.1k
Basic pricing block

Author:
Leon Bachmann

2 years ago

6.8k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

1 month ago

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

Author:
Hamza Atig

1 week ago

20
Simple pricing card
minimal pricing card

Author:
Anonymous

1 year ago

7.9k
Pricing card

Author:
Sophia Baker

2 years ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components