Card by SmookyDev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="product-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group" 3> 4 <div class="para uppercase text-center leading-none z-40"> 5 <p 6 style="-webkit-text-stroke: 1px rgb(207, 205, 205); 7 -webkit-text-fill-color: transparent;" 8 class="z-10 font-bold text-lg -mb-5 tracking-wider text-gray-500" 9 > 10 New Product 11 </p> 12 <p class="font-bold text-xl tracking-wider text-[#495c48] z-30"> 13 New Product 14 </p> 15 </div> 16 <div 17 class="w-[180px] aspect-square relative z-20 after:absolute after:h-1 after:w-full after:opacity-0 after:bg-[#7b956a] after:top-8 after:left-0 after:group-hover:opacity-100 after:translate-x-1/2 after:translate-y-1/2 after:-z-20 after:group-hover:w-full after:transition-all after:duration-300 after:group-hover:origin-right after:group-hover:-translate-x-1/2 group-hover:translate-x-1/2 transition-all duration-300" 18 > 19 <svg 20 xmlns:xlink="http://www.w3.org/1999/xlink" 21 xmlns="http://www.w3.org/2000/svg" 22 viewBox="0 0 512 512" 23 text-rendering="geometricPrecision" 24 shape-rendering="geometricPrecision" 25 image-rendering="optimizeQuality" 26 fill-rule="evenodd" 27 clip-rule="evenodd" 28 > 29 <linearGradient 30 y2="0" 31 y1="512" 32 x2="256" 33 x1="256" 34 gradientUnits="userSpaceOnUse" 35 id="id0" 36 > 37 <stop stop-color="#495c48" offset="0"></stop> 38 <stop stop-color="#9db891" offset=".490196"></stop> 39 <stop stop-color="#7b956a" offset="1"></stop> 40 </linearGradient> 41 <g id="Layer_x0020_1"> 42 <path 43 fill="url(#id0)" 44 d="m310 512h-108c-16.4 0-31.9-6.5-43.7-18.3s-18.3-27.3-18.3-43.7v-261c0-29.8 24.2-54 54-54h123c30.3 0 55 24.2 55 54v261c0 16.4-6.5 31.9-18.3 43.7s-27.3 18.3-43.7 18.3zm-90-439v-34c0-23 9.9-39 24-39h24c13.5 0 24 17.1 24 39v34zm-33 48.36v-27.36c0-3.9 3.1-7 7-7h124c3.9 0 7 3.1 7 7v27.46c-2.63-.3-5.3-.46-8-.46h-123c-2.36 0-4.7.12-7 .36zm69 71.6c-33.94 54.87-38.25 93.49-29.7 116.4 5.82 15.59 17.8 23.39 29.7 23.39s23.88-7.8 29.7-23.39c8.55-22.91 4.24-61.53-29.7-116.4zm-42.77 121.27c-10.32-27.64-5.23-73.83 36.85-137.91.52-.84 1.22-1.57 2.09-2.14 3.22-2.12 7.54-1.22 9.65 1.99 42.17 64.16 47.27 110.4 36.95 138.06-8.09 21.68-25.39 32.52-42.77 32.52s-34.68-10.84-42.77-32.52zm102.27 126.87c-2.8 0-5.9-.4-9.3-1.3-.1 0-.1 0-.2 0-14-4.2-21.8-18.1-17.7-31.7.1-.4.3-.8.4-1.1.2-.4.4-.8.6-1.3.8-1.9 1.9-4.3 3.8-6.5 24.5-50.8 21.9-118.2 21.9-118.9-.1-3.5 2.3-6.5 5.7-7.2s6.8 1.3 7.9 4.6c3.3 9.6 11.2 41 15.2 73.2 5.1 42 1.8 69.7-9.9 82.2-3.7 4-9.6 8-18.4 8zm-5.6-14.8c8 2.2 11.7-.5 13.7-2.7 12.5-13.4 9.3-57.7 2.8-94.5-2.9 23.5-8.9 51.9-21.2 76.9-.3.7-.8 1.3-1.3 1.9-.6.6-1.3 2.1-1.8 3.4-.2.4-.4.8-.5 1.2-1.5 5.9 2.1 11.9 8.3 13.8zm-113.4 14.8c-8.9 0-14.8-4-18.4-7.9-11.7-12.5-15-40.2-9.9-82.2 3.9-32.2 11.8-63.6 15.2-73.2 1.1-3.3 4.5-5.2 8-4.6 3.4.7 5.8 3.8 5.6 7.3 0 .7-3.5 68 21.8 118.6 1.9 2.2 3 4.7 3.9 6.6.2.5.4.9.6 1.3s.3.7.4 1.1c4.1 13.6-3.7 27.5-17.7 31.7-.1 0-.1 0-.2 0-3.4.9-6.5 1.3-9.3 1.3zm-11.2-110.6c-6.3 36.5-9.3 79.8 3.1 93.1 2 2.2 5.7 4.8 13.7 2.7 6.3-1.9 9.9-7.9 8.4-13.8-.2-.4-.4-.8-.5-1.2-.5-1.2-1.2-2.7-1.8-3.4-.5-.5-1-1.1-1.3-1.8-12.7-24.5-18.7-52.3-21.6-75.6z" 45 ></path> 46 </g> 47 </svg> 48 <div 49 class="tooltips absolute top-0 left-0 -translate-x-[150%] p-2 flex flex-col items-start gap-10 transition-all duration-300 group-hover:-translate-x-full" 50 > 51 <p 52 class="text-[#7b956a] font-semibold text-xl uppercase group-hover:delay-1000 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500" 53 > 54 Toner 55 </p> 56 <ul class="flex flex-col items-start gap-2"> 57 <li 58 class="inline-flex gap-2 items-center justify-center group-hover:delay-200 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500" 59 > 60 <svg 61 stroke-linejoin="round" 62 stroke-linecap="round" 63 stroke-width="3" 64 class="stroke-[#495c48]" 65 stroke="#000000" 66 fill="none" 67 viewBox="0 0 24 24" 68 height="10" 69 width="10" 70 xmlns="http://www.w3.org/2000/svg" 71 > 72 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> 73 <polyline points="22 4 12 14.01 9 11.01"></polyline> 74 </svg> 75 <p class="text-xs font-semibold text-[#495c48]">Hydration</p> 76 </li> 77 <li 78 class="inline-flex gap-2 items-center justify-center group-hover:delay-300 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500" 79 > 80 <svg 81 stroke-linejoin="round" 82 stroke-linecap="round" 83 stroke-width="3" 84 class="stroke-[#495c48]" 85 stroke="#000000" 86 fill="none" 87 viewBox="0 0 24 24" 88 height="10" 89 width="10" 90 xmlns="http://www.w3.org/2000/svg" 91 > 92 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> 93 <polyline points="22 4 12 14.01 9 11.01"></polyline> 94 </svg> 95 <p class="text-xs font-semibold text-[#495c48]"> 96 Protect Skin Barrier 97 </p> 98 </li> 99 <li 100 class="inline-flex gap-2 items-center justify-center group-hover:delay-400 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500" 101 > 102 <svg 103 stroke-linejoin="round" 104 stroke-linecap="round" 105 stroke-width="3" 106 class="stroke-[#495c48]" 107 stroke="#000000" 108 fill="none" 109 viewBox="0 0 24 24" 110 height="10" 111 width="10" 112 xmlns="http://www.w3.org/2000/svg" 113 > 114 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> 115 <polyline points="22 4 12 14.01 9 11.01"></polyline> 116 </svg> 117 <p class="text-xs font-semibold text-[#495c48]">Reduce Winkles</p> 118 </li> 119 <li 120 class="inline-flex gap-2 items-center justify-center group-hover:delay-500 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500" 121 > 122 <svg 123 stroke-linejoin="round" 124 stroke-linecap="round" 125 stroke-width="3" 126 class="stroke-[#495c48]" 127 stroke="#000000" 128 fill="none" 129 viewBox="0 0 24 24" 130 height="10" 131 width="10" 132 xmlns="http://www.w3.org/2000/svg" 133 > 134 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> 135 <polyline points="22 4 12 14.01 9 11.01"></polyline> 136 </svg> 137 <p class="text-xs font-semibold text-[#495c48]">Anti Inflammatory</p> 138 </li> 139 </ul> 140 </div> 141 </div> 142</div> 143
734 views
734 views
MIT License