Home
Muzammil Riaz
Professional Plan

Professional Plan

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

Card

Author Muzammil Riaz

131

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

multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

12.1k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

2 years ago

9.6k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

1 month ago

526
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

4 months ago

482
cards
cards slices

Author:
Anonymous

1 year ago

6.2k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.6k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

3.7k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

194
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

1 month ago

128
Profile card

Author:
Jaber Zarif

1 year ago

1.9k
Patient card

Author:
Anonymous

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components