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 <p class="text-xs">John Doe</p> 7 <p class="text-xs">June 1, 2000</p> 8 </div> 9 </div> 10 <div class="flex flex-row justify-between w-full"> 11 <h3 class="text-xl font-bold">Great Experience!</h3> 12 13 <div class="text-xs"> 14 <div class="flex flex-row"> 15 <svg 16 xmlns="http://www.w3.org/2000/svg" 17 class="h-4 w-4 text-yellow-400" 18 viewBox="0 0 20 20" 19 fill="currentColor" 20 > 21 <path 22 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" 23 ></path> 24 </svg> 25 <svg 26 xmlns="http://www.w3.org/2000/svg" 27 class="h-4 w-4 text-yellow-400" 28 viewBox="0 0 20 20" 29 fill="currentColor" 30 > 31 <path 32 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" 33 ></path> 34 </svg> 35 <svg 36 xmlns="http://www.w3.org/2000/svg" 37 class="h-4 w-4 text-yellow-400" 38 viewBox="0 0 20 20" 39 fill="currentColor" 40 > 41 <path 42 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" 43 ></path> 44 </svg> 45 <svg 46 xmlns="http://www.w3.org/2000/svg" 47 class="h-4 w-4 text-yellow-400" 48 viewBox="0 0 20 20" 49 fill="currentColor" 50 > 51 <path 52 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" 53 ></path> 54 </svg> 55 56 <svg 57 xmlns="http://www.w3.org/2000/svg" 58 class="h-4 w-4 text-yellow-200" 59 viewBox="0 0 20 20" 60 fill="currentColor" 61 > 62 <path 63 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" 64 ></path> 65 </svg> 66 </div> 67 </div> 68 </div> 69 70 <div class="text-sm"> 71 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia 72 odio vitae vestibulum. Donec in efficitur ipsum, sed dapibus eros. 73 </div> 74</div> 75
448 views
448 views
Variations
1 MIT License