Card by Manish-Tamang
#e8e8e8
HTML +TailwindCSS
1<div 2 class="w-full max-w-[320px] mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-zinc-900" 3> 4 <div class="flex justify-between items-center px-6 py-4"> 5 <div class="flex items-center"> 6 <svg 7 class="h-6 w-6 text-yellow-500" 8 fill="none" 9 height="24" 10 stroke="currentColor" 11 stroke-linecap="round" 12 stroke-linejoin="round" 13 stroke-width="2" 14 viewBox="0 0 24 24" 15 width="24" 16 xmlns="http://www.w3.org/2000/svg" 17 > 18 <path d="M9 18V5l12-2v13"></path> 19 <circle cx="6" cy="18" r="3"></circle> 20 <circle cx="18" cy="16" r="3"></circle> 21 </svg> 22 <div class="mx-3"> 23 <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200"> 24 Timro Mann 25 </h3> 26 <p class="text-gray-500 dark:text-gray-400">Dibbya Subba</p> 27 </div> 28 </div> 29 <div class="flex items-center"> 30 <svg 31 class="h-6 w-6 text-red-500" 32 fill="none" 33 height="24" 34 stroke="currentColor" 35 stroke-linecap="round" 36 stroke-linejoin="round" 37 stroke-width="2" 38 viewBox="0 0 24 24" 39 width="24" 40 xmlns="http://www.w3.org/2000/svg" 41 > 42 <path 43 d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" 44 ></path></svg 45 ><svg 46 class="h-6 w-6 text-gray-500 dark:text-gray-400 ml-4" 47 fill="none" 48 height="24" 49 stroke="currentColor" 50 stroke-linecap="round" 51 stroke-linejoin="round" 52 stroke-width="2" 53 viewBox="0 0 24 24" 54 width="24" 55 xmlns="http://www.w3.org/2000/svg" 56 > 57 <polygon 58 points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" 59 ></polygon> 60 </svg> 61 </div> 62 </div> 63 <div class="relative"> 64 <div class="absolute inset-0 flex items-center justify-center"></div> 65 </div> 66 <div class="px-6 py-4"> 67 <div class="flex items-center"> 68 <svg 69 class="h-5 w-5 text-gray-500 dark:text-gray-400" 70 fill="none" 71 height="24" 72 stroke="currentColor" 73 stroke-linecap="round" 74 stroke-linejoin="round" 75 stroke-width="2" 76 viewBox="0 0 24 24" 77 width="24" 78 xmlns="http://www.w3.org/2000/svg" 79 > 80 <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon> 81 </svg> 82 <div class="w-full mx-3"> 83 <div 84 class="relative mt-1 h-1 bg-gray-200 rounded overflow-hidden dark:bg-gray-800" 85 > 86 <div class="absolute left-0 top-0 h-full bg-yellow-500 w-1/2"></div> 87 </div> 88 </div> 89 <p class="text-sm text-gray-500 dark:text-gray-400">50%</p> 90 </div> 91 <div 92 class="flex justify-between text-sm text-gray-500 dark:text-gray-400 mt-3" 93 > 94 <span> 00:03 </span><span> 3:35 </span> 95 </div> 96 </div> 97</div> 98
482 views
482 views
MIT License