Home
dev-fab250
3D Modern Pricing Card

3D Modern Pricing Card

Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

This tailwind example is contributed by dev-fab250, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author dev-fab250

303

Fork Fullscreen

<body class="bg-gradient-to-br from-indigo-900 to-purple-800 min-h-screen flex items-center justify-center p-4">
  
  <div class="card-3d max-w-md w-full glass-effect rounded-2xl overflow-hidden transition-all hover:shadow-2xl relative">
    
    <div class="floating-badge absolute -top-3 -right-3 bg-gradient-to-r from-pink-500 to-rose-500 py-2 px-4 rounded-full shadow-lg z-10">
      <span class="text-xs font-bold text-white tracking-wider">POPULAR</span>
    </div>
    
    
    <div class="p-8 text-center relative z-0">
      
      <div class="mx-auto mb-6 w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-inner border border-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      </div>
      
      <h3 class="text-2xl font-bold text-white">Pro Plan</h3>
      <p class="mt-2 text-white/80">For fast-growing startups</p>
      
      
      <div class="mt-6 relative">
        <div class="absolute -inset-1 bg-white/10 blur rounded-lg"></div>
        <div class="relative bg-gradient-to-r from-indigo-500/30 to-purple-500/30 p-4 rounded-lg">
          <span class="text-4xl font-bold text-white">$29</span>
          <span class="text-white/70">/month</span>
        </div>
      </div>
      
      
      <button class="mt-8 w-full bg-white text-indigo-600 py-3 px-6 rounded-xl font-bold hover:bg-indigo-100 transition-all transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
        Get Started →
      </button>
    </div>
    
    
    <div class="glass-effect border-t border-white/10 px-6 py-6 backdrop-blur-md">
      <ul class="space-y-3">
        <li class="flex items-center">
          <div class="bg-white/10 p-1 rounded-full mr-3">
            <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
          <span class="text-white/90">10K monthly visits</span>
        </li>
        <li class="flex items-center">
          <div class="bg-white/10 p-1 rounded-full mr-3">
            <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
          <span class="text-white/90">Unlimited projects</span>
        </li>
        <li class="flex items-center">
          <div class="bg-white/10 p-1 rounded-full mr-3">
            <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
          <span class="text-white/90">24/7 Priority support</span>
        </li>
      </ul>
    </div>
  </div>
</body>

Related Examples