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

498

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

beautifull project Item

Author:
Akram Khan

1 year ago

2.5k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

3 months ago

515
Hover effect card

Author:
Rakib Hasan Sohag

9 months ago

1.3k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.8k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

10k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

4 months ago

467
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

1 month ago

192
Product features cards

Author:
Henrik R.

1 year ago

3.6k
Shoping Cart Popup

Author:
ABDO-SY

7 months ago

910
Hover Card

Author:
Maxim

1 year ago

2.5k
card
simple card for begin

Author:
Omer fils ELENGA

7 months ago

1.9k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

8 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components