پیشنمایش زنده
کد HTML
<div class="group overflow-hidden bg-neutral-50 rounded-xl bg-gradient-to-tr from-cyan-800 via-cyan-700 to-cyan-500 text-gray-50">
<div class="before:duration-700 before:absolute before:w-28 before:h-28 before:bg-transparent before:blur-none before:border-8 before:opacity-50 before:rounded-full before:-left-4 before:-top-12 w-64 h-48 flex flex-col justify-between relative z-10 group-hover:before:top-28 group-hover:before:left-44 group-hover:before:scale-125 group-hover:before:blur">
<div class="text p-3 flex flex-col justify-evenly h-full">
<span class="font-bold text-2xl">Get Your Document</span>
<p class="subtitle">Access your document instantly, simply click the download link.</p>
</div>
<div class="w-full flex flex-row justify-between z-10">
<a class="hover:opacity-90 py-3 bg-cyan-50 w-full flex justify-center" href="#">
<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="w-6 h-6 stroke-cyan-800">
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M18.3,65.8v4A11.9,11.9,0,0,0,30.2,81.7H69.8A11.9,11.9,0,0,0,81.7,69.8v-4M65.8,50,50,65.8m0,0L34.2,50M50,65.8V18.3" class="">
</path>
</svg>
</a>
<a class="hover:opacity-90 py-3 bg-cyan-50 w-full flex justify-center" href="#">
<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="w-6 h-6 stroke-cyan-800">
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M21.9,50h0M50,50h0m28.1,0h0M25.9,50a4,4,0,1,1-4-4A4,4,0,0,1,25.9,50ZM54,50a4,4,0,1,1-4-4A4,4,0,0,1,54,50Zm28.1,0a4,4,0,1,1-4-4A4,4,0,0,1,82.1,50Z">
</path>
</svg>
</a>
</div>
</div>
</div>
کد CSS
.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-48{height:12rem}.h-6{height:1.5rem}.h-full{height:100%}.w-6{width:1.5rem}.w-64{width:16rem}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-cyan-800{--tw-gradient-from:#155e75 var(--tw-gradient-from-position);--tw-gradient-to:rgb(21 94 117 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-cyan-700{--tw-gradient-to:rgb(14 116 144 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.stroke-cyan-800{stroke:#155e75}.p-3{padding:0.75rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:-left-4::before{content:var(--tw-content);left:-1rem}.before\:-top-12::before{content:var(--tw-content);top:-3rem}.before\:h-28::before{content:var(--tw-content);height:7rem}.before\:w-28::before{content:var(--tw-content);width:7rem}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:border-8::before{content:var(--tw-content);border-width:8px}.before\:bg-transparent::before{content:var(--tw-content);background-color:transparent}.before\:opacity-50::before{content:var(--tw-content);opacity:0.5}.before\:blur-none::before{content:var(--tw-content);--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\:duration-700::before{content:var(--tw-content);transition-duration:700ms}.hover\:opacity-90:hover{opacity:0.9}.group:hover .group-hover\:before\:left-44::before{content:var(--tw-content);left:11rem}.group:hover .group-hover\:before\:top-28::before{content:var(--tw-content);top:7rem}.group:hover .group-hover\:before\:scale-125::before{content:var(--tw-content);--tw-scale-x:1.25;--tw-scale-y:1.25;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\:before\:blur::before{content:var(--tw-content);--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}