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

773

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

Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.7k
Profile Card

Author:
Crimson

1 year ago

1.6k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

470
Simple responsive cards

Author:
Shakti

2 years ago

10k
Card template

Author:
Raul antonio de la cruz hernandez

1 week ago

23
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

8 months ago

1k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

10.6k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.5k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.3k
Dynamic Google Card

Author:
Cristian

10 months ago

1.1k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components