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

179

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

Basic pricing card

Author:
Sienna

1 year ago

9.9k
Services
explore our awesome Services

Author:
ابراهيم سيد

8 months ago

1.3k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

8 hours ago

8
Pricing section

Author:
Leon Bachmann

2 years ago

11.2k
Card
Card

Author:
Aman kumar

6 months ago

750
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

1 month ago

266
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

7.6k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

4 months ago

1.3k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

12.8k
Clean pricing cards

Author:
Santiago Hernandez

8 months ago

1.4k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

9.5k
Pricing card

Author:
Piet Vriend

1 year ago

7.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components