Professional Plan

This tailwind example is contributed by Muzammil Riaz, on 27-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author Muzammil Riaz

Tailwind v3.4 698 1

Fork Fullscreen

<div class="mt-20 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-500 group border border-gray-200 dark:border-gray-700 relative">
  <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-xl"></div>
  
  <div class="px-6 py-4">
    <div class="flex justify-between items-center mb-2">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white">Professional Plan</h3>
      <span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-3 py-1 rounded-full">Popular</span>
    </div>
    
    <p class="text-gray-600 dark:text-gray-300 text-sm mb-6">For growing businesses that need advanced features</p>
    
    <div class="mb-6">
      <span class="text-4xl font-bold text-gray-800 dark:text-white">$29</span>
      <span class="text-gray-600 dark:text-gray-400">/month</span>
    </div>
    
    <ul class="space-y-3 mb-8">
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span class="text-gray-700 dark:text-gray-300">50 GB Storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span class="text-gray-700 dark:text-gray-300">Unlimited Users</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span class="text-gray-700 dark:text-gray-300">Premium Support</span>
      </li>
    </ul>
    
    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md hover:shadow-lg">
      Get Started
    </button>
  </div>
</div>

Related Examples

Call to Action Box

Aitrik Saha

1 year ago

2.1k
Card responsive and dark mode grid

Cristian

1 year ago

2.4k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

SHARIFUL ISLAM

1 year ago

1.4k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

149
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

2 months ago

235
card simple

Raul antonio de la cruz hernandez

7 months ago

624
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Nicole Shalom

1 year ago

2.1k
Chat Bot

Md. Tofayel islam

1 year ago

1.3k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
cards
cards slices

Anonymous

2 years ago

7.6k
new Save Component tailwindflex
new Save Component tailwindflex

Omer fils ELENGA

4 months ago

358
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

594