پیشنمایش زنده
کد HTML
<div
class="max-w-md mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-500 before:rounded-full before:-z-10 before:blur-2xl after:w-32 after:h-32 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-24 after:-right-12"
>
<h2 class="text-2xl text-sky-900 font-bold mb-6">Update Your Profile</h2>
<form method="post" action="#">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-600" for="name"
>Full Name</label
>
<input class="mt-1 p-2 w-full border rounded-md" type="text" />
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-600" for="email"
>Email Address</label
>
<input
class="mt-1 p-2 w-full border rounded-md"
name="email"
id="email"
type="email"
/>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-600" for="bio"
>Bio</label
>
<textarea
class="mt-1 p-2 w-full border rounded-md"
rows="3"
name="bio"
id="bio"
></textarea>
</div>
<div class="flex justify-end">
<button
class="[background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
type="submit"
>
Update Profile
</button>
</div>
</form>
</div>
کد CSS
.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:0.25rem}.block{display:block}.flex{display:flex}.w-full{width:100%}.max-w-md{max-width:28rem}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-sky-900{--tw-text-opacity:1;color:rgb(12 74 110 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.\[background\:linear-gradient\(144deg\2c \#af40ff\2c \#5b42f3_50\%\2c \#00ddeb\)\]{background:linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb)}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:-z-10::before{content:var(--tw-content);z-index:-10}.before\:h-24::before{content:var(--tw-content);height:6rem}.before\:w-24::before{content:var(--tw-content);width:6rem}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-purple-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity))}.before\:blur-2xl::before{content:var(--tw-content);--tw-blur:blur(40px);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-12::after{content:var(--tw-content);right:-3rem}.after\:top-24::after{content:var(--tw-content);top:6rem}.after\:-z-10::after{content:var(--tw-content);z-index:-10}.after\:h-32::after{content:var(--tw-content);height:8rem}.after\:w-32::after{content:var(--tw-content);width:8rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-sky-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.after\:blur-xl::after{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)}.hover\:opacity-80:hover{opacity:0.8}