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

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