پیشنمایش زنده
کد HTML
<form
class="text-neutral-800 py-6 relative overflow-hidden flex flex-col justify-around w-96 h-44 border border-neutral-500 rounded-lg bg-neutral-50 p-3 px-6"
>
<div
class="before:absolute before:w-32 before:h-20 before:right-2 before:bg-rose-300 before:-z-10 before:rounded-full before:blur-xl before:-top-12 z-10 after:absolute after:w-24 after:h-24 after:bg-purple-300 after:-z-10 after:rounded-full after:blur after:-top-12 after:-right-6"
>
<span class="font-extrabold text-2xl text-violet-600"
>Get more updates...</span
>
<p class="text-neutral-700">
Sign up for our newsletter and you'll be the first to find out about new
features
</p>
</div>
<div class="flex gap-1">
<div
class="relative rounded-lg w-64 overflow-hidden before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg after:absolute after:z-10 after:w-20 after:h-20 after:content[''] after:bg-rose-300 after:right-12 after:top-3 after:rounded-full after:blur-lg"
>
<input
type="text"
class="relative bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 placeholder-opacity-60 focus:border-violet-500 block w-full p-2.5 checked:bg-emerald-500"
placeholder="Mail..."
/>
</div>
<button
class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400"
>
Subscribe
</button>
</div>
</form>
کد CSS
.relative{position:relative}.z-10{z-index:10}.block{display:block}.flex{display:flex}.h-44{height:11rem}.w-64{width:16rem}.w-96{width:24rem}.w-full{width:100%}.flex-col{flex-direction:column}.justify-around{justify-content:space-around}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-500{--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-2\.5{padding:0.625rem}.p-3{padding:0.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.text-violet-600{--tw-text-opacity:1;color:rgb(124 58 237 / var(--tw-text-opacity))}.placeholder-violet-700::placeholder{--tw-placeholder-opacity:1;color:rgb(109 40 217 / var(--tw-placeholder-opacity))}.placeholder-opacity-60::placeholder{--tw-placeholder-opacity:0.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:-top-12::before{content:var(--tw-content);top:-3rem}.before\:right-0::before{content:var(--tw-content);right:0px}.before\:right-2::before{content:var(--tw-content);right:0.5rem}.before\:-z-10::before{content:var(--tw-content);z-index:-10}.before\:h-12::before{content:var(--tw-content);height:3rem}.before\:h-20::before{content:var(--tw-content);height:5rem}.before\:w-12::before{content:var(--tw-content);width:3rem}.before\:w-32::before{content:var(--tw-content);width:8rem}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-rose-300::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.before\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);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\:blur-xl::before{content:var(--tw-content);--tw-blur:blur(24px);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\:absolute::after{content:var(--tw-content);position:absolute}.after\:-right-6::after{content:var(--tw-content);right:-1.5rem}.after\:-top-12::after{content:var(--tw-content);top:-3rem}.after\:right-12::after{content:var(--tw-content);right:3rem}.after\:top-3::after{content:var(--tw-content);top:0.75rem}.after\:-z-10::after{content:var(--tw-content);z-index:-10}.after\:z-10::after{content:var(--tw-content);z-index:10}.after\:h-20::after{content:var(--tw-content);height:5rem}.after\:h-24::after{content:var(--tw-content);height:6rem}.after\:w-20::after{content:var(--tw-content);width:5rem}.after\:w-24::after{content:var(--tw-content);width:6rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-purple-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(216 180 254 / var(--tw-bg-opacity))}.after\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\:blur::after{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)}.after\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);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)}.checked\:bg-emerald-500:checked{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.hover\:bg-violet-400:hover{--tw-bg-opacity:1;background-color:rgb(167 139 250 / var(--tw-bg-opacity))}.focus\:border-violet-500:focus{--tw-border-opacity:1;border-color:rgb(139 92 246 / var(--tw-border-opacity))}.focus\:ring-violet-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(139 92 246 / var(--tw-ring-opacity))}