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

219

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