پیشنمایش زنده
کد HTML
<div class="overflow-hidden relative w-56 h-64 bg-sky-600 rounded-2xl text-gray-50 flex flex-col justify-end items-center gap-2">
<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="absolute opacity-30 -rotate-12 -bottom-12 -right-12 w-40 h-40 stroke-current">
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M65.8,46.1V30.3a15.8,15.8,0,1,0-31.6,0V46.1M22.4,38.2H77.6l4,47.3H18.4Z" class="svg-stroke-primary">
</path>
</svg>
<div class="flex flex-col items-center">
<p class="text-xl font-extrabold">Discount</p>
<p class="relative text-xs inline-block after:absolute after:content-[''] after:ml-2 after:top-1/2 after:bg-gray-200 after:w-12 after:h-0.5 before:absolute before:content-[''] before:-ml-14 before:top-1/2 before:bg-gray-200 before:w-12 before:h-0.5">Up to</p>
</div>
<span class="font-extrabold text-7xl -skew-x-12 -skew-y-12 -mt-1 mb-5">70%</span>
<button class="z-10 duration-500 font-bold px-4 py-2 bg-gray-50 text-sky-500 hover:bg-sky-500 hover:text-gray-50">Shop now</button>
<p class="text-xs mb-1">*Variable prices</p>
</div>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.-bottom-12 {
bottom: -3rem
}
.-right-12 {
right: -3rem
}
.z-10 {
z-index: 10
}
.-mt-1 {
margin-top: -0.25rem
}
.mb-1 {
margin-bottom: 0.25rem
}
.mb-5 {
margin-bottom: 1.25rem
}
.inline-block {
display: inline-block
}
.flex {
display: flex
}
.h-40 {
height: 10rem
}
.h-64 {
height: 16rem
}
.w-40 {
width: 10rem
}
.w-56 {
width: 14rem
}
.-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))
}
.-skew-x-12 {
--tw-skew-x: -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))
}
.-skew-y-12 {
--tw-skew-y: -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))
}
.flex-col {
flex-direction: column
}
.items-center {
align-items: center
}
.justify-end {
justify-content: flex-end
}
.gap-2 {
gap: 0.5rem
}
.overflow-hidden {
overflow: hidden
}
.rounded-2xl {
border-radius: 1rem
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-sky-600 {
--tw-bg-opacity: 1;
background-color: rgb(2 132 199 / var(--tw-bg-opacity))
}
.stroke-current {
stroke: currentColor
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.text-7xl {
font-size: 4.5rem;
line-height: 1
}
.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-extrabold {
font-weight: 800
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity))
}
.text-sky-500 {
--tw-text-opacity: 1;
color: rgb(14 165 233 / var(--tw-text-opacity))
}
.opacity-30 {
opacity: 0.3
}
.duration-500 {
transition-duration: 500ms
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute
}
.before\:top-1\/2::before {
content: var(--tw-content);
top: 50%
}
.before\:-ml-14::before {
content: var(--tw-content);
margin-left: -3.5rem
}
.before\:h-0::before {
content: var(--tw-content);
height: 0px
}
.before\:h-0\.5::before {
content: var(--tw-content);
height: 0.125rem
}
.before\:w-12::before {
content: var(--tw-content);
width: 3rem
}
.before\:bg-gray-200::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.before\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:top-1\/2::after{content:var(--tw-content);top:50%}.after\:ml-2::after{content:var(--tw-content);margin-left:0.5rem}.after\:h-0::after{content:var(--tw-content);height:0px}.after\:h-0\.5::after{content:var(--tw-content);height:0.125rem}.after\:w-12::after{content:var(--tw-content);width:3rem}.after\:bg-gray-200::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}.hover\:bg-sky-500:hover{--tw-bg-opacity:1;background-color:rgb(14 165 233 / var(--tw-bg-opacity))}.hover\:text-gray-50:hover{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}