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 5 class="absolute -left-[40%] top-0 group-hover:rotate-12 transition-all duration-300 group-hover:scale-150" 6 > 7 <div class="flex gap-1"> 8 <svg 9 stroke-linejoin="round" 10 stroke-linecap="round" 11 stroke-width="1" 12 fill="none" 13 viewBox="0 0 24 24" 14 class="fill-gray-300 rotate-[24deg]" 15 height="200" 16 width="200" 17 xmlns="http://www.w3.org/2000/svg" 18 > 19 <polygon 20 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" 21 ></polygon> 22 </svg> 23 </div> 24 </div> 25 <div 26 class="absolute rounded-full bg-gray-500 z-20 left-1/2 top-[44%] h-[110%] w-[110%] -translate-x-1/2 group-hover:top-[58%] transition-all duration-300" 27 ></div> 28 <div class="para uppercase text-center leading-none z-40"> 29 <p class="text-black font-semibold text-xs font-serif">Best</p> 30 <p class="font-bold text-xl tracking-wider text-gray-500">Fashion</p> 31 </div> 32 <div class="img w-[180px] aspect-square bg-gray-100 z-40 rounded-md"> 33 <svg 34 xml:space="preserve" 35 viewBox="0 0 498.608 498.608" 36 xmlns:xlink="http://www.w3.org/1999/xlink" 37 xmlns="http://www.w3.org/2000/svg" 38 id="Layer_1" 39 version="1.1" 40 > 41 <g> 42 <ellipse 43 ry="72.08" 44 rx="73" 45 cy="76.72" 46 cx="249.3" 47 style="fill:#042635;" 48 ></ellipse> 49 <ellipse 50 ry="26.664" 51 rx="27" 52 cy="63.48" 53 cx="177.388" 54 style="fill:#042635;" 55 ></ellipse> 56 <ellipse 57 ry="26.664" 58 rx="27" 59 cy="44.816" 60 cx="201.388" 61 style="fill:#042635;" 62 ></ellipse> 63 <ellipse 64 ry="26.664" 65 rx="27" 66 cy="91.488" 67 cx="164.084" 68 style="fill:#042635;" 69 ></ellipse> 70 <ellipse 71 ry="26.664" 72 rx="27" 73 cy="118.144" 74 cx="164.084" 75 style="fill:#042635;" 76 ></ellipse> 77 <ellipse 78 ry="20.408" 79 rx="20.664" 80 cy="139.728" 81 cx="160.42" 82 style="fill:#042635;" 83 ></ellipse> 84 <ellipse 85 ry="20.408" 86 rx="20.664" 87 cy="160.408" 88 cx="153.092" 89 style="fill:#042635;" 90 ></ellipse> 91 <ellipse 92 ry="17.448" 93 rx="17.664" 94 cy="17.448" 95 cx="215.42" 96 style="fill:#042635;" 97 ></ellipse> 98 <ellipse 99 ry="17.448" 100 rx="17.664" 101 cy="19.488" 102 cx="237.868" 103 style="fill:#042635;" 104 ></ellipse> 105 <ellipse 106 ry="26.664" 107 rx="27" 108 cy="63.48" 109 cx="321.204" 110 style="fill:#042635;" 111 ></ellipse> 112 <ellipse 113 ry="26.664" 114 rx="27" 115 cy="44.816" 116 cx="297.204" 117 style="fill:#042635;" 118 ></ellipse> 119 <ellipse 120 ry="26.664" 121 rx="27" 122 cy="91.488" 123 cx="334.532" 124 style="fill:#042635;" 125 ></ellipse> 126 <ellipse 127 ry="26.664" 128 rx="27" 129 cy="118.144" 130 cx="334.532" 131 style="fill:#042635;" 132 ></ellipse> 133 <ellipse 134 ry="20.408" 135 rx="20.664" 136 cy="139.728" 137 cx="338.188" 138 style="fill:#042635;" 139 ></ellipse> 140 <ellipse 141 ry="20.408" 142 rx="20.664" 143 cy="160.408" 144 cx="345.548" 145 style="fill:#042635;" 146 ></ellipse> 147 <ellipse 148 ry="17.448" 149 rx="17.664" 150 cy="17.448" 151 cx="283.228" 152 style="fill:#042635;" 153 ></ellipse> 154 <ellipse 155 ry="17.448" 156 rx="17.664" 157 cy="19.488" 158 cx="260.748" 159 style="fill:#042635;" 160 ></ellipse> 161 </g> 162 <polygon 163 points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168 164 48.356,366.408 57.308,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608" 165 style="fill:#CC9789;" 166 ></polygon> 167 <polygon 168 points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168 169 48.356,366.408 103.404,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608" 170 style="fill:#BF8377;" 171 ></polygon> 172 <polygon 173 points="450.252,366.408 297.308,319.168 297.308,305.656 246.236,301.48 244.668,319.168 174 253.868,366.408 303.164,498.608 57.308,498.608 57.308,498.608 441.308,498.608 443.428,498.608 443.428,498.608" 175 style="fill:#A06660;" 176 ></polygon> 177 <path 178 d="M353.972,165.472c0,35.344-51.264,64-104.672,64c-53.376,0-104.656-28.656-104.656-64 179 s51.28-64,104.656-64C302.708,101.472,353.972,130.128,353.972,165.472z" 180 style="fill:#042635;" 181 ></path> 182 <g> 183 <rect 184 height="112" 185 width="96" 186 style="fill:#BF8377;" 187 y="218.608" 188 x="201.308" 189 ></rect> 190 <polygon 191 points="290.084,311.312 249.308,416.152 199.804,335.424 249.308,285.92" 192 style="fill:#BF8377;" 193 ></polygon> 194 </g> 195 <polygon 196 points="297.308,343.808 297.308,218.608 202.284,218.608 281.46,442.96" 197 style="fill:#A06660;" 198 ></polygon> 199 <path 200 d="M324.268,134.128c0,72.24-36.624,137.624-74.944,137.624s-74.96-65.376-74.96-137.624 201 s36.64-84.288,74.96-84.288S324.268,61.888,324.268,134.128z" 202 style="fill:#CC9789;" 203 ></path> 204 <path 205 d="M249.324,49.84c38.32,0,74.944,12.048,74.944,84.288s-36.624,137.624-74.944,137.624" 206 style="fill:#BF8377;" 207 ></path> 208 <g> 209 <path 210 d="M259.74,45.08c0,0-69.656,53.328,89.92,117.568c0,0,3.064-70.688-23-101.504 211 c-26.08-30.8-66.44-27-66.44-27L259.74,45.08z" 212 style="fill:#042635;" 213 ></path> 214 <path 215 d="M284.692,35.968c0,0,64.16,71.112-135.672,132.048c0,0-11.784-75.976,18.984-108.528 216 c30.76-32.552,85.92-27.144,85.92-27.144L284.692,35.968z" 217 style="fill:#042635;" 218 ></path> 219 </g> 220 <circle 221 r="4.672" 222 cy="284.128" 223 cx="332.988" 224 style="fill:#E5C15C;" 225 ></circle> 226 <g> 227 <path 228 d="M196.812,466.152c0,0,70.008-2,119.336-68s51.328-66,78-54.672 229 c26.664,11.344-25.344-2-18.672,130.672c1.064,21.344-16.672-5.328-16.672-5.328l-81.328,2.656l-39.984,2.488L196.812,466.152z" 230 style="fill:#744196;" 231 ></path> 232 <path 233 d="M301.804,466.152c0,0-70.008-2-119.336-68s-51.336-66-78-54.672 234 c-26.664,11.344,25.344-2,18.672,130.672c-1.064,21.344,16.664-5.328,16.664-5.328l81.336,2.656l39.984,2.488L301.804,466.152z" 235 style="fill:#744196;" 236 ></path> 237 </g> 238 <path 239 d="M387.724,498.608c-20.88-80-56.76-34-138.416-34c-81.664,0-117.536-46-138.416,34H387.724z" 240 style="fill:#9461AF;" 241 ></path> 242 <path 243 d="M113.308,498.608h274.416c-20.872-80-56.416-34.496-137.208-34" 244 style="fill:#744196;" 245 ></path> 246 <g> 247 <path 248 d="M154.3,188.312c-17.384,0-31.504,14.112-31.504,31.504s14.12,31.504,31.504,31.504 249 c17.4,0,31.504-14.112,31.504-31.504S171.7,188.312,154.3,188.312z M154.3,237.312c-9.648,0-17.496-7.832-17.496-17.504 250 s7.84-17.504,17.496-17.504c9.664,0,17.504,7.832,17.504,17.504S163.964,237.312,154.3,237.312z" 251 style="fill:#9461AF;" 252 ></path> 253 <path 254 d="M344.3,188.312c-17.384,0-31.496,14.112-31.496,31.504s14.112,31.504,31.496,31.504 255 c17.4,0,31.504-14.112,31.504-31.504S361.7,188.312,344.3,188.312z M344.3,237.312c-9.648,0-17.504-7.832-17.504-17.504 256 s7.848-17.504,17.504-17.504c9.664,0,17.504,7.832,17.504,17.504S353.964,237.312,344.3,237.312z" 257 style="fill:#9461AF;" 258 ></path> 259 <path 260 d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48 261 c0-26.512,30.072-8,67.168-8C287.628,300.824,317.692,282.312,317.692,308.824z" 262 style="fill:#9461AF;" 263 ></path> 264 </g> 265 <path 266 d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48 267 c0-26.512,30.072,21.328,67.168,21.328C287.628,330.152,317.692,282.312,317.692,308.824z" 268 style="fill:#744196;" 269 ></path> 270 <polygon 271 points="303.644,302.152 324.316,262.152 358.316,260.152 349.644,286.152 314.316,300.152" 272 style="fill:#9461AF;" 273 ></polygon> 274 <polygon 275 points="295.644,324.152 314.316,300.152 356.316,303.48 379.644,325.48 350.316,331.48 276 313.644,310.152" 277 style="fill:#744196;" 278 ></polygon> 279 <g> 280 <circle 281 r="3.76" 282 cy="477.728" 283 cx="143.068" 284 style="fill:#F476D3;" 285 ></circle> 286 <circle 287 r="3.752" 288 cy="477.728" 289 cx="162.348" 290 style="fill:#F476D3;" 291 ></circle> 292 <circle r="3.76" cy="477.728" cx="181.7" style="fill:#F476D3;"></circle> 293 <circle 294 r="3.76" 295 cy="477.728" 296 cx="201.02" 297 style="fill:#F476D3;" 298 ></circle> 299 <circle 300 r="3.768" 301 cy="477.728" 302 cx="220.332" 303 style="fill:#F476D3;" 304 ></circle> 305 <circle 306 r="3.752" 307 cy="477.728" 308 cx="239.644" 309 style="fill:#F476D3;" 310 ></circle> 311 <circle 312 r="3.752" 313 cy="477.728" 314 cx="258.988" 315 style="fill:#F476D3;" 316 ></circle> 317 <circle 318 r="3.752" 319 cy="477.728" 320 cx="278.284" 321 style="fill:#F476D3;" 322 ></circle> 323 <circle 324 r="3.752" 325 cy="477.728" 326 cx="297.628" 327 style="fill:#F476D3;" 328 ></circle> 329 <circle 330 r="3.752" 331 cy="477.728" 332 cx="316.924" 333 style="fill:#F476D3;" 334 ></circle> 335 <circle 336 r="3.76" 337 cy="477.728" 338 cx="336.236" 339 style="fill:#F476D3;" 340 ></circle> 341 <circle 342 r="3.76" 343 cy="477.728" 344 cx="355.548" 345 style="fill:#F476D3;" 346 ></circle> 347 </g> 348 </svg> 349 </div> 350 <div 351 class="btm-_container z-40 flex flex-row justify-between items-end gap-10" 352 > 353 <div class="flex flex-col items-start gap-1"> 354 <div class="inline-flex gap-3 items-center justify-center"> 355 <div class="p-1 bg-white flex items-center justify-center rounded-full"> 356 <svg 357 stroke-linejoin="round" 358 stroke-linecap="round" 359 stroke-width="1" 360 fill="none" 361 viewBox="0 0 24 24" 362 class="fill-gray-800 h-3 w-3 stroke-none" 363 xmlns="http://www.w3.org/2000/svg" 364 > 365 <path 366 d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" 367 ></path> 368 </svg> 369 </div> 370 <p class="font-semibold text-xs text-white">+1234 456 780</p> 371 </div> 372 <div class="flex flex-row gap-2"> 373 <div class="inline-flex gap-3 items-center justify-center"> 374 <div 375 class="p-1 bg-white flex items-center justify-center rounded-full" 376 > 377 <svg 378 stroke-linejoin="round" 379 stroke-linecap="round" 380 stroke-width="1" 381 fill="none" 382 viewBox="0 0 24 24" 383 class="fill-gray-800 h-3 w-3 stroke-white" 384 xmlns="http://www.w3.org/2000/svg" 385 > 386 <path 387 d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" 388 ></path> 389 <polyline points="22,6 12,13 2,6"></polyline> 390 </svg> 391 </div> 392 <p class="font-semibold text-xs text-white">[email protected]</p> 393 </div> 394 </div> 395 </div> 396 <div class="btn"> 397 <button 398 class="uppercase font-semibold text-xs px-2 whitespace-nowrap py-1 rounded-full bg-white text-gray-800" 399 > 400 ORDER NOW 401 </button> 402 </div> 403 </div> 404</div> 405
672 views
672 views
MIT License