Premium Tailwind CSS Card Component

Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

This tailwind example is contributed by CodewithFaraz, on 04-Sep-2025. Component is made with Tailwind v3.4. It is responsive.

Card

Author CodewithFaraz

Tailwind v3.4 1k 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Premium Card | Tailwind CSS</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 relative z-10">
          <div>
            <span class="premium-tag text-xs font-semibold px-4 py-2 rounded-full uppercase tracking-wider">
                            <i class="fas fa-crown mr-2"></i>Premium
                        </span>
            <h1 class="text-4xl font-bold text-premium-dark mt-4">Executive Pro Suite</h1>
            <p class="text-slate-600 mt-2">Everything you need for your business in one powerful package</p>
          </div>
          <div class="mt-6 md:mt-0">
            <div class="text-5xl font-extrabold text-premium-accent">$149</div>
            <span class="text-slate-500">/month</span>
          </div>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          
          <div>
            <h2 class="text-xl font-semibold text-premium-dark mb-6 flex items-center">
              <div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center text-white mr-3">
                <i class="fas fa-star"></i>
              </div>
              Premium Features
            </h2>
            <ul class="space-y-4">
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">Unlimited Projects & Teams</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">Advanced Analytics Dashboard</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">24/7 Priority Support</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">Custom Branding & White Label</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">Team Collaboration Tools</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                  <i class="fas fa-check"></i>
                </div>
                <span class="text-slate-700">Exclusive Premium Resources</span>
              </li>
            </ul>
          </div>

<div>
            <h2 class="text-xl font-semibold text-premium-dark mb-6 flex items-center">
              <div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center text-white mr-3">
                <i class="fas fa-chart-line"></i>
              </div>
              Performance Metrics
            </h2>
            <div class="grid grid-cols-2 gap-4">
              <div class="stat-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-premium-accent">99.9%</div>
                <div class="text-sm text-slate-600 mt-1">Uptime</div>
              </div>
              <div class="stat-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-premium-accent">2.4s</div>
                <div class="text-sm text-slate-600 mt-1">Load Time</div>
              </div>
              <div class="stat-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-premium-accent">24/7</div>
                <div class="text-sm text-slate-600 mt-1">Support</div>
              </div>
              <div class="stat-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-premium-accent">100ms</div>
                <div class="text-sm text-slate-600 mt-1">Response Time</div>
              </div>
            </div>

<div class="mt-6">
              <div class="flex items-center justify-between mb-2">
                <span class="text-slate-700 text-sm">Storage</span>
                <span class="text-premium-accent font-semibold">500GB / 1TB</span>
              </div>
              <div class="w-full bg-slate-200 rounded-full h-2.5">
                <div class="bg-gradient-to-r from-premium-accent to-purple-600 h-2.5 rounded-full" style="width: 50%">
                </div>
              </div>

<div class="flex items-center justify-between mb-2 mt-4">
                <span class="text-slate-700 text-sm">Bandwidth</span>
                <span class="text-premium-accent font-semibold">Unlimited</span>
              </div>
              <div class="w-full bg-slate-200 rounded-full h-2.5">
                <div class="bg-gradient-to-r from-premium-accent to-purple-600 h-2.5 rounded-full" style="width: 100%">
                </div>
              </div>
            </div>
          </div>
        </div>

<div class="text-center">
          <button class="btn-primary text-white font-bold py-4 px-10 rounded-xl transition-all duration-300 flex items-center justify-center mx-auto">
                        <i class="fas fa-rocket mr-3"></i>
                        Get Started Now
                    </button>
          <p class="text-slate-600 text-sm mt-4">
            <i class="fas fa-shield-alt mr-2"></i>30-day money-back guarantee •
            <i class="fas fa-credit-card ml-3 mr-2"></i>No credit card required
          </p>
        </div>

<div
          class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-br from-premium-accent/20 to-transparent rounded-full -translate-x-12 translate-y-8">
        </div>
        <div
          class="absolute top-1/2 right-0 w-24 h-24 bg-gradient-to-br from-premium-accent/20 to-transparent rounded-full translate-x-8">
        </div>
      </div>
    </div>
  </div>

</html>

Related Examples

Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Nick Girga

1 year ago

1.2k
Minimal Info cards

Gopi Yadav

3 years ago

11k
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.

SHARIFUL ISLAM

1 year ago

2.8k
Simple responsive cards

Shakti

3 years ago

10.6k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
Avtar Cards
this is cards, for the profile section

pablitodgb

1 year ago

774
Card Slider

Maxim

1 year ago

2.3k
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

10 months ago

1.7k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

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

Anonymous

1 year ago

1.9k
Card
Profile Card

Manuel Dala

1 year ago

1.7k