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

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

Info card

Author:
Samuel Dawson

2 years ago

9.6k
Product features cards

Author:
Henrik R.

1 year ago

3.1k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

9.2k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

2 months ago

378
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

1 week ago

34
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

3 months ago

925
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.3k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

3 months ago

758
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.4k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

4 months ago

1.1k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

3 months ago

418
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

1 month ago

260

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components