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

490

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

Brand Grid with Hover Effect

Author:
ariaw

1 year ago

1.6k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

30k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

12.2k
Simple Card with Image
Horizontal card

Author:
Prem..

3 years ago

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

Author:
pablitodgb

9 months ago

407
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

11 months ago

1.1k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

4 months ago

237
cards
cards slices

Author:
Anonymous

2 years ago

7.1k
Battery and signal
Battery and signal bar component

Author:
ardianhu

1 year ago

1k
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11.6k
Profile card

Author:
Jaber Zarif

1 year ago

2.6k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components