Card by EcheverriaJesus
#212121
HTML +TailwindCSS
1<div 2 class="flex flex-col items-center bg-white w-72 h-auto pt-5 pb-7 border border-gray-200 rounded-lg space-y-8" 3> 4 <section class="flex flex-col text-center space-y-1"> 5 <h2 class="text-2xl font-bold tracking-tight text-gray-900"> 6 Title of your Card 7 </h2> 8 <p class="text-slate-500 text-sm">Subtitle on your Card</p> 9 </section> 10 <section class="space-y-2"> 11 <div class="flex gap-2"> 12 <svg 13 fill="currentColor" 14 viewBox="0 0 20 20" 15 class="w-5 h-5 text-blue-500" 16 xmlns="http://www.w3.org/2000/svg" 17 > 18 <path 19 clip-rule="evenodd" 20 d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" 21 fill-rule="evenodd" 22 ></path> 23 </svg> 24 <span class="text-slate-500 text-sm">Name Product</span> 25 </div> 26 <div class="flex gap-2"> 27 <svg 28 fill="currentColor" 29 viewBox="0 0 20 20" 30 class="w-5 h-5 text-blue-500" 31 xmlns="http://www.w3.org/2000/svg" 32 > 33 <path 34 clip-rule="evenodd" 35 d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" 36 fill-rule="evenodd" 37 ></path> 38 </svg> 39 <span class="text-slate-500 text-sm">Name Product</span> 40 </div> 41 <div class="flex gap-2"> 42 <svg 43 fill="currentColor" 44 viewBox="0 0 20 20" 45 class="w-5 h-5 text-blue-500" 46 xmlns="http://www.w3.org/2000/svg" 47 > 48 <path 49 clip-rule="evenodd" 50 d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" 51 fill-rule="evenodd" 52 ></path> 53 </svg> 54 <span class="text-slate-500 text-sm">Name Product</span> 55 </div> 56 </section> 57 <section class="flex w-full flex-col space-y-2 px-9"> 58 <button 59 class="py-3 font-medium tracking-wide capitalize transition-colors duration-300 transform bg-gray-100 rounded-md hover:bg-gray-200 text-sm text-gray-600" 60 > 61 First Buttom 62 </button> 63 <button 64 class="py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600" 65 > 66 Accept 67 </button> 68 </section> 69</div> 70
227 views
227 views
MIT License