پیشنمایش زنده
کد HTML
<div
class="mx-auto w-full max-w-xs relative flex flex-col items-center justify-center text-center overflow-visible"
>
<h3 class="text-3xl font-bold">Get Started Now</h3>
<div class="w-full relative flex flex-col items-center justify-center">
<div
class="absolute inset-x-auto top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-full blur-sm"
></div>
<div
class="absolute inset-x-auto top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-full"
></div>
<div
class="absolute inset-x-auto top-0 bg-gradient-to-r from-transparent via-purple-400 to-transparent h-[5px] w-1/2 blur-sm"
></div>
<div
class="absolute inset-x-auto top-0 bg-gradient-to-r from-transparent via-purple-400 to-transparent h-px w-1/2"
></div>
<div
style=""
class="absolute inset-0 w-full h-full bg-background [mask-image:radial-gradient(50%_200px_at_top,transparent_20%,white)]"
></div>
</div>
<p class="mt-6 text-sm">
Be part of millions people around the world using modern User Interfaces.
</p>
<span
class="absolute -z-[1] backdrop-blur-sm inset-0 w-full h-full flex before:content-[''] before:h-3/4 before:w-full before:bg-gradient-to-r before:from-black before:to-purple-600 before:blur-[90px] after:content-[''] after:h-1/2 after:w-full after:bg-gradient-to-br after:from-cyan-400 after:to-sky-300 after:blur-[90px]"
></span>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.inset-x-auto{left:auto;right:auto}.top-0{top:0px}.-z-\[1\]{z-index:-1}.mx-auto{margin-left:auto;margin-right:auto}.mt-6{margin-top:1.5rem}.flex{display:flex}.h-\[2px\]{height:2px}.h-\[5px\]{height:5px}.h-full{height:100%}.h-px{height:1px}.w-1\/2{width:50%}.w-full{width:100%}.max-w-xs{max-width:20rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-visible{overflow:visible}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-indigo-500{--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-400{--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.blur-sm{--tw-blur:blur(4px);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)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\[mask-image\:radial-gradient\(50\%_200px_at_top\2c transparent_20\%\2c white\)\]{-webkit-mask-image:radial-gradient(50% 200px at top,transparent 20%,white);mask-image:radial-gradient(50% 200px at top,transparent 20%,white)}.before\:h-3\/4::before{content:var(--tw-content);height:75%}.before\:w-full::before{content:var(--tw-content);width:100%}.before\:bg-gradient-to-r::before{content:var(--tw-content);background-image:linear-gradient(to right, var(--tw-gradient-stops))}.before\:from-black::before{content:var(--tw-content);--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.before\:to-purple-600::before{content:var(--tw-content);--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.before\:blur-\[90px\]::before{content:var(--tw-content);--tw-blur:blur(90px);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\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.after\:h-1\/2::after{content:var(--tw-content);height:50%}.after\:w-full::after{content:var(--tw-content);width:100%}.after\:bg-gradient-to-br::after{content:var(--tw-content);background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.after\:from-cyan-400::after{content:var(--tw-content);--tw-gradient-from:#22d3ee var(--tw-gradient-from-position);--tw-gradient-to:rgb(34 211 238 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.after\:to-sky-300::after{content:var(--tw-content);--tw-gradient-to:#7dd3fc var(--tw-gradient-to-position)}.after\:blur-\[90px\]::after{content:var(--tw-content);--tw-blur:blur(90px);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)}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}