Card by SmookyDev
#212121
HTML +TailwindCSS
1<div 2 class="m-2 group px-10 py-5 bg-white/10 rounded-lg flex flex-col items-center justify-center gap-2 relative after:absolute after:h-full after:bg-[#abd373] z-20 shadow-lg after:-z-20 after:w-full after:inset-0 after:rounded-lg transition-all duration-300 hover:transition-all hover:duration-300 after:transition-all after:duration-500 after:hover:transition-all after:hover:duration-500 overflow-hidden cursor-pointer after:-translate-y-full after:hover:translate-y-0 [&_p]:delay-200 [&_p]:transition-all" 3> 4 <svg 5 xmlns="http://www.w3.org/2000/svg" 6 xmlns:xlink="http://www.w3.org/1999/xlink" 7 version="1.1" 8 class="w-44 card1img aspect-square text-[#abd373] group-hover:bg-gray-800 text-5xl rounded-full p-2 transition-all duration-300 group-hover:transition-all group-hover:duration-300 group-hover:-translate-y-2 mx-auto" 9 viewBox="0 0 256 256" 10 xml:space="preserve" 11 > 12 <defs></defs> 13 <g 14 style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" 15 transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" 16 > 17 <path 18 d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825" 19 style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;" 20 transform="matrix(1 0 0 1 0 0)" 21 stroke-linecap="round" 22 ></path> 23 <path 24 d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z" 25 style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;" 26 transform="matrix(1 0 0 1 0 0)" 27 stroke-linecap="round" 28 ></path> 29 <polygon 30 points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09" 31 style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" 32 transform="matrix(1 0 0 1 0 0)" 33 ></polygon> 34 <polyline 35 points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09" 36 style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" 37 transform="matrix(1 0 0 1 0 0)" 38 ></polyline> 39 <polygon 40 points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09" 41 style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;" 42 transform="matrix(1 0 0 1 0 0)" 43 ></polygon> 44 </g> 45 </svg> 46 47 <p 48 class="cardtxt font-semibold text-gray-200 tracking-wider group-hover:text-gray-700 text-xl" 49 > 50 Calathea Orbifolia 51 </p> 52 <p class="blueberry font-semibold text-gray-600 text-xs"> 53 One of Kind & Unique Plants Collection Here at SMKY. 54 </p> 55 <div class="ordernow flex flex-row justify-between items-center w-full"> 56 <p 57 class="ordernow-text text-[#abd373] font-semibold group-hover:text-gray-800" 58 > 59 $21.00 60 </p> 61 <p 62 class="btun4 lg:inline-flex items-center gap-3 group-hover:bg-white/10 bg-[#abd373] shadow-[10px_10px_150px_#ff9f0d] cursor-pointer py-2 px-4 text-sm font-semibold rounded-full butn" 63 > 64 Order Now 65 </p> 66 </div> 67</div> 68
1.1K views
1.1K views
MIT License