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

This tailwind example is contributed by Rathanak Phan, on 24-Jun-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Card Pricing Other

Author Rathanak Phan

Tailwind v3.4 1.3k 4

Fork Fullscreen

<div class="border border-gray-200 dark:border-gray-600 shadow-md shadow-teal-300 rounded-lg p-6 w-full max-w-sm transition-transform transform hover:scale-105 duration-300 dark:bg-gray-700 dark:text-gray-300">
      <h2 class="text-2xl font-extrabold font-mono text-center mb-2">Free</h2>
      <p class="text-center text-xl text-gray-600 dark:text-gray-400 mb-4">$0<span class="text-base">/month</span></p>
      <ul class="list-disc text-lg px-6 mb-6 space-y-2">
        <li>1 Project</li>
        <li>Community Support</li>
        <li>Basic Features</li>
      </ul>
      <button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
        Get Started
      </button>
    </div>

<div class="border-2 border-teal-500 shadow-md shadow-teal-300 rounded-lg p-6 w-full max-w-sm transition-transform transform hover:scale-105 duration-300 bg-teal-50 dark:bg-teal-900 dark:text-gray-100">
      <h2 class="text-3xl font-extrabold font-mono text-center mb-2">Pro</h2>
      <p class="text-center text-2xl text-teal-600 dark:text-teal-300 mb-4">$19<span class="text-base">/month</span></p>
      <ul class="list-disc text-lg px-6 mb-6 space-y-2">
        <li>Unlimited Projects</li>
        <li>Priority Support</li>
        <li>Custom Domains</li>
        <li>Analytics</li>
      </ul>
      <button class="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
        Upgrade to Pro
      </button>
    </div>

<div class="border border-gray-200 dark:border-gray-600 shadow-md shadow-teal-300 rounded-lg p-6 w-full max-w-sm transition-transform transform hover:scale-105 duration-300 dark:bg-gray-700 dark:text-gray-300">
      <h2 class="text-2xl font-extrabold font-mono text-center mb-2">Enterprise</h2>
      <p class="text-center text-xl text-gray-600 dark:text-gray-400 mb-4">Custom Pricing</p>
      <ul class="list-disc text-lg px-6 mb-6 space-y-2">
        <li>All Pro Features</li>
        <li>Team Management</li>
        <li>24/7 Premium Support</li>
        <li>Dedicated Account Manager</li>
      </ul>
      <button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
        Contact Sales
      </button>
    </div>

</div>
</div>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
cards
cards with background animation

Anonymous

2 years ago

3.9k
Card
Card

Aman kumar

2 years ago

3k
Card
Card

Aman kumar

2 years ago

2.2k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Payment Cards

Shammi Nethupul

2 years ago

3k