Card by seyed-mohsen-mousavi
#e8e8e8
HTML +TailwindCSS
1<div 2 class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105" 3> 4 <div class="p-1 bg-green-200"></div> 5 <div class="p-8"> 6 <h2 class="text-3xl font-bold text-gray-800 mb-4">Pro Plan</h2> 7 <p class="text-gray-600 mb-6">Perfect for growing businesses</p> 8 <p class="text-4xl font-bold text-gray-800 mb-6">$49.99</p> 9 <ul class="text-sm text-gray-600 mb-6"> 10 <li class="mb-2 flex items-center"> 11 <svg 12 xmlns="http://www.w3.org/2000/svg" 13 viewBox="0 0 24 24" 14 stroke="currentColor" 15 fill="none" 16 class="w-4 h-4 mr-2 text-green-500" 17 > 18 <path 19 d="M5 13l4 4L19 7" 20 stroke-width="2" 21 stroke-linejoin="round" 22 stroke-linecap="round" 23 ></path> 24 </svg> 25 25 Users 26 </li> 27 <li class="mb-2 flex items-center"> 28 <svg 29 xmlns="http://www.w3.org/2000/svg" 30 viewBox="0 0 24 24" 31 stroke="currentColor" 32 fill="none" 33 class="w-4 h-4 mr-2 text-green-500" 34 > 35 <path 36 d="M5 13l4 4L19 7" 37 stroke-width="2" 38 stroke-linejoin="round" 39 stroke-linecap="round" 40 ></path> 41 </svg> 42 Advanced Features 43 </li> 44 <li class="flex items-center"> 45 <svg 46 xmlns="http://www.w3.org/2000/svg" 47 viewBox="0 0 24 24" 48 stroke="currentColor" 49 fill="none" 50 class="w-4 h-4 mr-2 text-green-500" 51 > 52 <path 53 d="M5 13l4 4L19 7" 54 stroke-width="2" 55 stroke-linejoin="round" 56 stroke-linecap="round" 57 ></path> 58 </svg> 59 24/7 Support 60 </li> 61 </ul> 62 </div> 63 <div class="p-4"> 64 <button 65 class="w-full bg-green-500 text-white rounded-full px-4 py-2 hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800" 66 > 67 Select Plan 68 </button> 69 </div> 70</div> 71
394 views
394 views
MIT License