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

1.2k

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

Price
Pricing

Author:
Jean Claude Nguetta

1 month ago

49
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

5 months ago

1.5k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.2k
Pricing card for subscription

Author:
Task Master

2 years ago

11.2k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

5 months ago

765
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

9 months ago

1.2k
Clean pricing cards

Author:
Freja Jensen

2 years ago

8.1k
Basic pricing card

Author:
Sienna

2 years ago

11.3k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13.6k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.6k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

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

Author:
SHARIFUL ISLAM

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components