Home
Rathanak Phan
Card pricing section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Card Pricing Other

Author Rathanak Phan

329

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

Author:
Akshay

3 years ago

10.7k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.3k
cards
cards with background animation

Author:
Anonymous

2 years ago

10.9k
cards
cards with background animation

Author:
Anonymous

2 years ago

11k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.8k
cards
cards with background animation

Author:
Anonymous

1 year ago

2.7k
Card
Card

Author:
Aman kumar

1 year ago

2.3k
Card
Card

Author:
Aman kumar

1 year ago

1.2k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

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

Author:
Ameth Galarcio

1 year ago

3.1k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components