Home
CodewithFaraz
Premium Tailwind CSS Card Component

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 CSS v3. It is responsive.

Card

Author CodewithFaraz

307

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

Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

96
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

11 months ago

1.2k
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

11 months ago

1.7k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

8 months ago

428
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.3k
Feature card

Author:
Matti

1 year ago

1.1k
Responsive Cards
Responsive Cards

Author:
Chanuka Rukshan

1 week ago

43
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

8 months ago

768
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.8k
Product card

Author:
Simon Scheffer

3 years ago

31.5k
Voucher Card

Author:
Adriano Monecchi

3 months ago

187
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

3 years ago

13.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components