Price Display Component

<div class="font-sans antialiased p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 dark:from-purple-900 dark:via-pink-900 dark:to-rose-900 min-h-screen flex items-center justify-center">
  <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Pricing Card 1: Basic -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-purple-300 dark:border-purple-600 group">
      <div class="p-6 sm:p-8 text-center bg-purple-200 dark:bg-purple-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-100 mb-2">Starter</h3>
        <p class="text-purple-700 dark:text-purple-200 text-base sm:text-lg">Perfect for hobbyists & individuals.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-pink-500 dark:text-pink-300">$</span>19
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>5 Project Spaces</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>10GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic Support</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-pink-500 dark:bg-pink-400 hover:bg-pink-600 dark:hover:bg-pink-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600">
          Choose Plan
        </button>
      </div>
    </div>

    <!-- Pricing Card 2: Pro (Recommended) -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-rose-400 dark:border-rose-700 scale-105 relative z-10 group">
      <div class="absolute -top-3 right-0 bg-rose-500 dark:bg-rose-600 text-white dark:text-gray-100 text-xs sm:text-sm font-bold px-4 py-1.5 rounded-bl-lg rounded-tr-3xl shadow-md transform rotate-3 origin-top-right">Most Popular</div>
      <div class="p-6 sm:p-8 text-center bg-rose-300 dark:bg-rose-800 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-rose-900 dark:text-rose-100 mb-2">Pro</h3>
        <p class="text-rose-700 dark:text-rose-200 text-base sm:text-lg">For growing teams & ambitious projects.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-orange-600 dark:text-orange-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-orange-500 dark:text-orange-300">$</span>49
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Unlimited Projects</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>100GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Domains</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 hover:bg-orange-600 dark:hover:bg-orange-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          Get Started Now
        </button>
      </div>
    </div>

    <!-- Pricing Card 3: Enterprise -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-yellow-300 dark:border-yellow-600 group">
      <div class="p-6 sm:p-8 text-center bg-yellow-200 dark:bg-yellow-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-900 dark:text-yellow-100 mb-2">Enterprise</h3>
        <p class="text-yellow-700 dark:text-yellow-200 text-base sm:text-lg">Scale your business with dedicated support.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-green-600 dark:text-green-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-green-500 dark:text-green-300">$</span>99
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Pro Features</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Dedicated Account Manager</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Premium Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Integrations</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 hover:bg-green-600 dark:hover:bg-green-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
          Contact Sales
        </button>
      </div>
    </div>
  </div>
</div>