پیشنمایش زنده
کد HTML
<div
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
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"
viewBox="0 0 256 256"
xml:space="preserve"
>
<defs></defs>
<g
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;"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<path
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"
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;"
transform="matrix(1 0 0 1 0 0)"
stroke-linecap="round"
></path>
<path
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"
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;"
transform="matrix(1 0 0 1 0 0)"
stroke-linecap="round"
></path>
<polygon
points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09"
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;"
transform="matrix(1 0 0 1 0 0)"
></polygon>
<polyline
points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09"
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;"
transform="matrix(1 0 0 1 0 0)"
></polyline>
<polygon
points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09"
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;"
transform="matrix(1 0 0 1 0 0)"
></polygon>
</g>
</svg>
<p
class="cardtxt font-semibold text-gray-200 tracking-wider group-hover:text-gray-700 text-xl"
>
Calathea Orbifolia
</p>
<p class="blueberry font-semibold text-gray-600 text-xs">
One of Kind & Unique Plants Collection Here at SMKY.
</p>
<div class="ordernow flex flex-row justify-between items-center w-full">
<p
class="ordernow-text text-[#abd373] font-semibold group-hover:text-gray-800"
>
$21.00
</p>
<p
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"
>
Order Now
</p>
</div>
</div>
کد CSS
.relative{position:relative}.z-20{z-index:20}.m-2{margin:0.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-44{width:11rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-\[\#abd373\]{--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.p-2{padding:0.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-semibold{font-weight:600}.tracking-wider{letter-spacing:0.05em}.text-\[\#abd373\]{--tw-text-opacity:1;color:rgb(171 211 115 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.shadow-\[10px_10px_150px_\#ff9f0d\]{--tw-shadow:10px 10px 150px #ff9f0d;--tw-shadow-colored:10px 10px 150px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:inset-0::after{content:var(--tw-content);inset:0px}.after\:-z-20::after{content:var(--tw-content);z-index:-20}.after\:h-full::after{content:var(--tw-content);height:100%}.after\:w-full::after{content:var(--tw-content);width:100%}.after\:-translate-y-full::after{content:var(--tw-content);--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:rounded-lg::after{content:var(--tw-content);border-radius:0.5rem}.after\:bg-\[\#abd373\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.after\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\:transition-all:hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:duration-300:hover{transition-duration:300ms}.after\:hover\:translate-y-0:hover::after{content:var(--tw-content);--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:hover\:transition-all:hover::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:hover\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}.group:hover .group-hover\:-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.group:hover .group-hover\:bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.group:hover .group-hover\:text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.group:hover .group-hover\:text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.group:hover .group-hover\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\:duration-300{transition-duration:300ms}@media (min-width: 1024px){.lg\:inline-flex{display:inline-flex}}.\[\&_p\]\:transition-all p{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\[\&_p\]\:delay-200 p{transition-delay:200ms}