پیشنمایش زنده
کد HTML
<div
class="max-w-md mx-auto relative overflow-hidden z-10 bg-gray-800 p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-600 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 font-bold text-white mb-6">Update Your Profile</h2>
<form method="post" action="#">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-300" for="name"
>Full Name</label
>
<input
class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
type="text"
/>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-300" for="email"
>Email Address</label
>
<input
class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
name="email"
id="email"
type="email"
/>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-300" for="bio"
>Bio</label
>
<textarea
class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
rows="3"
name="bio"
id="bio"
></textarea>
</div>
<div class="flex justify-end">
<button
class="bg-gradient-to-r from-purple-600 via-purple-400 to-blue-500 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}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), 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-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.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-300{--tw-text-opacity:1;color:rgb(209 213 219 / 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)}.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-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(147 51 234 / 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}