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

811

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

Showcase Card

Author:
Jaber Zarif

1 year ago

2.7k
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

1 year ago

1.4k
Blog Author Card

Author:
EliteAI Tools

1 year ago

1.3k
Feature Section Cards

Author:
Akram Khan

1 year ago

2.2k
3D Card
Made a 3d card using tailwind css and the js

Author:
Sufyan jutt

1 month ago

263
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

4 months ago

236
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

3.5k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.6k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.8k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

9 months ago

1.2k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

2 years ago

4.6k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

11 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components