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

370

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

cards
cards slices

Author:
Anonymous

2 years ago

6.9k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.9k
Minimal Info cards

Author:
Gopi Yadav

3 years ago

10.6k
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)

8 months ago

1.1k
cards ecommerce
this cards have the best animation

Author:
ishimwe shadad

8 months ago

1.2k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

1 year ago

1.3k
Active Beauty Main Page

Author:
Maxim

9 months ago

1.1k
Coming Soon Page

Author:
Conan Hilton

3 years ago

10.2k
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:

Author:
Nicole Shalom

7 months ago

1.2k
Product Details Card

Author:
ABDO-SY

10 months ago

2.1k
content section

Author:
Crimson

1 year ago

954
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components