پیشنمایش زنده
کد HTML
<div
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"
>
<div
class="absolute -left-[40%] top-0 group-hover:rotate-12 transition-all duration-300 group-hover:scale-150"
>
<div class="flex gap-1">
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1"
fill="none"
viewBox="0 0 24 24"
class="fill-gray-300 rotate-[24deg]"
height="200"
width="200"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
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"
></polygon>
</svg>
</div>
</div>
<div
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"
></div>
<div class="para uppercase text-center leading-none z-40">
<p class="text-black font-semibold text-xs font-serif">Best</p>
<p class="font-bold text-xl tracking-wider text-gray-500">Fashion</p>
</div>
<div class="img w-[180px] aspect-square bg-gray-100 z-40 rounded-md">
<svg
xml:space="preserve"
viewBox="0 0 498.608 498.608"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
version="1.1"
>
<g>
<ellipse
ry="72.08"
rx="73"
cy="76.72"
cx="249.3"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="63.48"
cx="177.388"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="44.816"
cx="201.388"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="91.488"
cx="164.084"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="118.144"
cx="164.084"
style="fill:#042635;"
></ellipse>
<ellipse
ry="20.408"
rx="20.664"
cy="139.728"
cx="160.42"
style="fill:#042635;"
></ellipse>
<ellipse
ry="20.408"
rx="20.664"
cy="160.408"
cx="153.092"
style="fill:#042635;"
></ellipse>
<ellipse
ry="17.448"
rx="17.664"
cy="17.448"
cx="215.42"
style="fill:#042635;"
></ellipse>
<ellipse
ry="17.448"
rx="17.664"
cy="19.488"
cx="237.868"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="63.48"
cx="321.204"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="44.816"
cx="297.204"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="91.488"
cx="334.532"
style="fill:#042635;"
></ellipse>
<ellipse
ry="26.664"
rx="27"
cy="118.144"
cx="334.532"
style="fill:#042635;"
></ellipse>
<ellipse
ry="20.408"
rx="20.664"
cy="139.728"
cx="338.188"
style="fill:#042635;"
></ellipse>
<ellipse
ry="20.408"
rx="20.664"
cy="160.408"
cx="345.548"
style="fill:#042635;"
></ellipse>
<ellipse
ry="17.448"
rx="17.664"
cy="17.448"
cx="283.228"
style="fill:#042635;"
></ellipse>
<ellipse
ry="17.448"
rx="17.664"
cy="19.488"
cx="260.748"
style="fill:#042635;"
></ellipse>
</g>
<polygon
points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168
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"
style="fill:#CC9789;"
></polygon>
<polygon
points="450.252,366.408 297.308,319.168 297.308,306.608 201.308,306.608 201.308,319.168
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"
style="fill:#BF8377;"
></polygon>
<polygon
points="450.252,366.408 297.308,319.168 297.308,305.656 246.236,301.48 244.668,319.168
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"
style="fill:#A06660;"
></polygon>
<path
d="M353.972,165.472c0,35.344-51.264,64-104.672,64c-53.376,0-104.656-28.656-104.656-64
s51.28-64,104.656-64C302.708,101.472,353.972,130.128,353.972,165.472z"
style="fill:#042635;"
></path>
<g>
<rect
height="112"
width="96"
style="fill:#BF8377;"
y="218.608"
x="201.308"
></rect>
<polygon
points="290.084,311.312 249.308,416.152 199.804,335.424 249.308,285.92"
style="fill:#BF8377;"
></polygon>
</g>
<polygon
points="297.308,343.808 297.308,218.608 202.284,218.608 281.46,442.96"
style="fill:#A06660;"
></polygon>
<path
d="M324.268,134.128c0,72.24-36.624,137.624-74.944,137.624s-74.96-65.376-74.96-137.624
s36.64-84.288,74.96-84.288S324.268,61.888,324.268,134.128z"
style="fill:#CC9789;"
></path>
<path
d="M249.324,49.84c38.32,0,74.944,12.048,74.944,84.288s-36.624,137.624-74.944,137.624"
style="fill:#BF8377;"
></path>
<g>
<path
d="M259.74,45.08c0,0-69.656,53.328,89.92,117.568c0,0,3.064-70.688-23-101.504
c-26.08-30.8-66.44-27-66.44-27L259.74,45.08z"
style="fill:#042635;"
></path>
<path
d="M284.692,35.968c0,0,64.16,71.112-135.672,132.048c0,0-11.784-75.976,18.984-108.528
c30.76-32.552,85.92-27.144,85.92-27.144L284.692,35.968z"
style="fill:#042635;"
></path>
</g>
<circle
r="4.672"
cy="284.128"
cx="332.988"
style="fill:#E5C15C;"
></circle>
<g>
<path
d="M196.812,466.152c0,0,70.008-2,119.336-68s51.328-66,78-54.672
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"
style="fill:#744196;"
></path>
<path
d="M301.804,466.152c0,0-70.008-2-119.336-68s-51.336-66-78-54.672
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"
style="fill:#744196;"
></path>
</g>
<path
d="M387.724,498.608c-20.88-80-56.76-34-138.416-34c-81.664,0-117.536-46-138.416,34H387.724z"
style="fill:#9461AF;"
></path>
<path
d="M113.308,498.608h274.416c-20.872-80-56.416-34.496-137.208-34"
style="fill:#744196;"
></path>
<g>
<path
d="M154.3,188.312c-17.384,0-31.504,14.112-31.504,31.504s14.12,31.504,31.504,31.504
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
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"
style="fill:#9461AF;"
></path>
<path
d="M344.3,188.312c-17.384,0-31.496,14.112-31.496,31.504s14.112,31.504,31.496,31.504
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
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"
style="fill:#9461AF;"
></path>
<path
d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48
c0-26.512,30.072-8,67.168-8C287.628,300.824,317.692,282.312,317.692,308.824z"
style="fill:#9461AF;"
></path>
</g>
<path
d="M317.692,308.824c0,26.496-30.064,48-67.168,48c-37.096,0-67.168-21.504-67.168-48
c0-26.512,30.072,21.328,67.168,21.328C287.628,330.152,317.692,282.312,317.692,308.824z"
style="fill:#744196;"
></path>
<polygon
points="303.644,302.152 324.316,262.152 358.316,260.152 349.644,286.152 314.316,300.152"
style="fill:#9461AF;"
></polygon>
<polygon
points="295.644,324.152 314.316,300.152 356.316,303.48 379.644,325.48 350.316,331.48
313.644,310.152"
style="fill:#744196;"
></polygon>
<g>
<circle
r="3.76"
cy="477.728"
cx="143.068"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="162.348"
style="fill:#F476D3;"
></circle>
<circle r="3.76" cy="477.728" cx="181.7" style="fill:#F476D3;"></circle>
<circle
r="3.76"
cy="477.728"
cx="201.02"
style="fill:#F476D3;"
></circle>
<circle
r="3.768"
cy="477.728"
cx="220.332"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="239.644"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="258.988"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="278.284"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="297.628"
style="fill:#F476D3;"
></circle>
<circle
r="3.752"
cy="477.728"
cx="316.924"
style="fill:#F476D3;"
></circle>
<circle
r="3.76"
cy="477.728"
cx="336.236"
style="fill:#F476D3;"
></circle>
<circle
r="3.76"
cy="477.728"
cx="355.548"
style="fill:#F476D3;"
></circle>
</g>
</svg>
</div>
<div
class="btm-_container z-40 flex flex-row justify-between items-end gap-10"
>
<div class="flex flex-col items-start gap-1">
<div class="inline-flex gap-3 items-center justify-center">
<div class="p-1 bg-white flex items-center justify-center rounded-full">
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1"
fill="none"
viewBox="0 0 24 24"
class="fill-gray-800 h-3 w-3 stroke-none"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
></path>
</svg>
</div>
<p class="font-semibold text-xs text-white">+1234 456 780</p>
</div>
<div class="flex flex-row gap-2">
<div class="inline-flex gap-3 items-center justify-center">
<div
class="p-1 bg-white flex items-center justify-center rounded-full"
>
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1"
fill="none"
viewBox="0 0 24 24"
class="fill-gray-800 h-3 w-3 stroke-white"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<p class="font-semibold text-xs text-white">email@gmail.com</p>
</div>
</div>
</div>
<div class="btn">
<button
class="uppercase font-semibold text-xs px-2 whitespace-nowrap py-1 rounded-full bg-white text-gray-800"
>
ORDER NOW
</button>
</div>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-left-\[40\%\] {
left: -40%;
}
.left-1\/2 {
left: 50%;
}
.top-0 {
top: 0px;
}
.top-\[44\%\] {
top: 44%;
}
.z-20 {
z-index: 20;
}
.z-40 {
z-index: 40;
}
.z-\[100\] {
z-index: 100;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.h-3 {
height: 0.75rem;
}
.h-\[110\%\] {
height: 110%;
}
.w-3 {
width: 0.75rem;
}
.w-\[110\%\] {
width: 110%;
}
.w-\[180px\] {
width: 180px;
}
.w-\[300px\] {
width: 300px;
}
.shrink-0 {
flex-shrink: 0;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
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));
}
.rotate-\[24deg\] {
--tw-rotate: 24deg;
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));
}
.cursor-pointer {
cursor: pointer;
}
.snap-start {
scroll-snap-align: start;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.overflow-hidden {
overflow: hidden;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fill-gray-300 {
fill: #d1d5db;
}
.fill-gray-800 {
fill: #1f2937;
}
.stroke-none {
stroke: none;
}
.stroke-white {
stroke: #fff;
}
.p-1 {
padding: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.text-center {
text-align: center;
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-none {
line-height: 1;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px 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;
}
.group:hover .group-hover\:top-\[58\%\] {
top: 58%;
}
.group:hover .group-hover\:rotate-12 {
--tw-rotate: 12deg;
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\:scale-150 {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
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));
}