Card by Ykingdev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="flex flex-col gap-2 dark:text-white max-w-md w-full bg-white dark:bg-neutral-900 p-5 rounded-md mt-8 shadow-md hover:scale-105 hover:duration-150 duration-150" 3> 4 <div class="flex flex-row justify-between w-full"> 5 <div class="flex flex-row justify-between w-full"> 6 <div 7 class="bg-gray-200 dark:bg-neutral-700 rounded-md w-20 h-4 animate-pulse" 8 ></div> 9 <div 10 class="bg-gray-200 dark:bg-neutral-700 rounded-md w-10 animate-pulse" 11 ></div> 12 </div> 13 </div> 14 <div class="flex flex-row justify-between w-full"> 15 <div 16 class="bg-gray-200 dark:bg-neutral-700 rounded-md w-40 animate-pulse" 17 ></div> 18 19 <div class="text-xs"> 20 <div class="flex flex-row"> 21 <svg 22 fill="currentColor" 23 viewBox="0 0 20 20" 24 class="h-4 w-4 text-yellow-400" 25 xmlns="http://www.w3.org/2000/svg" 26 > 27 <path 28 d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z" 29 ></path> 30 </svg> 31 <svg 32 fill="currentColor" 33 viewBox="0 0 20 20" 34 class="h-4 w-4 text-yellow-400" 35 xmlns="http://www.w3.org/2000/svg" 36 > 37 <path 38 d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z" 39 ></path> 40 </svg> 41 <svg 42 fill="currentColor" 43 viewBox="0 0 20 20" 44 class="h-4 w-4 text-yellow-400" 45 xmlns="http://www.w3.org/2000/svg" 46 > 47 <path 48 d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z" 49 ></path> 50 </svg> 51 <svg 52 fill="currentColor" 53 viewBox="0 0 20 20" 54 class="h-4 w-4 text-yellow-400" 55 xmlns="http://www.w3.org/2000/svg" 56 > 57 <path 58 d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z" 59 ></path> 60 </svg> 61 62 <svg 63 fill="currentColor" 64 viewBox="0 0 20 20" 65 class="h-4 w-4 text-yellow-200" 66 xmlns="http://www.w3.org/2000/svg" 67 > 68 <path 69 d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z" 70 ></path> 71 </svg> 72 </div> 73 </div> 74 </div> 75 76 <div 77 class="bg-gray-200 dark:bg-neutral-700 rounded-md w-full h-20 animate-pulse" 78 ></div> 79</div> 80
493 views
Variation of acard
MIT License