پیشنمایش زنده
کد HTML
<div class="overflow-hidden relative w-56 h-64 bg-gray-50 rounded-2xl text-sky-400 flex flex-col justify-end items-center gap-2">
<svg class="absolute opacity-30 -rotate-12 -bottom-12 -right-12 w-40 h-40 stroke-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path class="svg-stroke-primary" d="M65.8,46.1V30.3a15.8,15.8,0,1,0-31.6,0V46.1M22.4,38.2H77.6l4,47.3H18.4Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
</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-sky-200 after:w-12 after:h-0.5 before:absolute before:content-[''] before:-ml-14 before:top-1/2 before:bg-sky-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 px-4 py-2 bg-sky-400 text-gray-50 hover:bg-sky-300">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-400{--tw-bg-opacity:1;background-color:rgb(56 189 248 / 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-extrabold{font-weight:800}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248 / var(--tw-text-opacity))}.opacity-30{opacity:0.3}.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-sky-200::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / 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-sky-200::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}.hover\:bg-sky-300:hover{--tw-bg-opacity:1;background-color:rgb(125 211 252 / var(--tw-bg-opacity))}