Card by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="max-w-[300px] w-full pt-10 px-10 pb-8 bg-gray-900 rounded-3xl"> 2 <div class="text-center mb-6"> 3 <h5 class="text-2xl font-semibold text-white mb-3">Deluxe</h5> 4 <span class="block text-5xl font-bold text-white mb-3">$20</span> 5 <span class="block text-gray-300 font-medium mb-6" 6 >per user, per month</span 7 > 8 <a 9 class="relative group inline-block w-full py-4 px-6 text-center text-gray-50 hover:text-gray-900 bg-yellow-600 font-semibold rounded-full overflow-hidden transition duration-200" 10 href="#" 11 > 12 <div 13 class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500" 14 ></div> 15 <span class="relative">Start 7-days Trial</span> 16 </a> 17 </div> 18 <ul> 19 <li class="flex mb-4 items-center"> 20 <svg 21 class="w-6 h-6 fill-current text-white" 22 viewBox="0 0 20 20" 23 xmlns="http://www.w3.org/2000/svg" 24 > 25 <path 26 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 27 ></path> 28 </svg> 29 <span class="ml-2 text-white">Unlimited Features</span> 30 </li> 31 <li class="flex mb-4 items-center"> 32 <svg 33 class="w-6 h-6 fill-current text-white" 34 viewBox="0 0 20 20" 35 xmlns="http://www.w3.org/2000/svg" 36 > 37 <path 38 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 39 ></path> 40 </svg> 41 <span class="ml-2 text-white">Enhanced Security</span> 42 </li> 43 <li class="flex mb-4 items-center"> 44 <svg 45 class="w-6 h-6 fill-current text-white" 46 viewBox="0 0 20 20" 47 xmlns="http://www.w3.org/2000/svg" 48 > 49 <path 50 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 51 ></path> 52 </svg> 53 <span class="ml-2 text-white">Priority Support</span> 54 </li> 55 <li class="flex mb-4 items-center"> 56 <svg 57 class="w-6 h-6 fill-current text-white" 58 viewBox="0 0 20 20" 59 xmlns="http://www.w3.org/2000/svg" 60 > 61 <path 62 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 63 ></path> 64 </svg> 65 <span class="ml-2 text-white">Exclusive Access</span> 66 </li> 67 <li class="flex mb-4 items-center"> 68 <svg 69 class="w-6 h-6 fill-current text-gray-500" 70 viewBox="0 0 20 20" 71 xmlns="http://www.w3.org/2000/svg" 72 > 73 <path 74 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 75 ></path> 76 </svg> 77 <span class="ml-2 text-gray-500 line-through">Ad-free Experience</span> 78 </li> 79 <li class="flex items-center"> 80 <svg 81 class="w-6 h-6 fill-current text-white" 82 viewBox="0 0 20 20" 83 xmlns="http://www.w3.org/2000/svg" 84 > 85 <path 86 d="M7.293 13.293l-3-3a1 1 0 011.414-1.414L8 12.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0z" 87 ></path> 88 </svg> 89 <span class="ml-2 text-white">Customization Options</span> 90 </li> 91 </ul> 92</div> 93
51 views
51 views
MIT License