پیشنمایش زنده
کد HTML
<div class="max-w-md relative flex flex-col p-4 rounded-md text-black bg-white">
<div class="text-2xl font-bold mb-2 text-[#1e0e4b] text-center">Welcome back to <span class="text-[#7747ff]">App</span></div>
<div class="text-sm font-normal mb-4 text-center text-[#1e0e4b]">Log in to your account</div>
<form class="flex flex-col gap-3">
<div class="block relative">
<label for="email" class="block text-gray-600 cursor-text text-sm leading-[140%] font-normal mb-2">Email</label>
<input type="text" id="email" class="rounded border border-gray-200 text-sm w-full font-normal leading-[18px] text-black tracking-[0px] appearance-none block h-11 m-0 p-[11px] focus:ring-2 ring-offset-2 ring-gray-900 outline-0">
</div>
<div class="block relative">
<label for="password" class="block text-gray-600 cursor-text text-sm leading-[140%] font-normal mb-2">Password</label>
<input type="text" id="password" class="rounded border border-gray-200 text-sm w-full font-normal leading-[18px] text-black tracking-[0px] appearance-none block h-11 m-0 p-[11px] focus:ring-2 ring-offset-2 ring-gray-900 outline-0">
</div>
<div>
<a class="text-sm text-[#7747ff]" href="#">Forgot your password?
</a></div>
<button type="submit" class="bg-[#7747ff] w-max m-auto px-6 py-2 rounded text-white text-sm font-normal">Submit</button>
</form>
<div class="text-sm text-center mt-[1.6rem]">Don’t have an account yet? <a class="text-sm text-[#7747ff]" href="#">Sign up for free!</a></div>
</div>
کد CSS
.relative{position:relative}.m-0{margin:0px}.m-auto{margin:auto}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mt-\[1\.6rem\]{margin-top:1.6rem}.block{display:block}.flex{display:flex}.h-11{height:2.75rem}.w-full{width:100%}.w-max{width:max-content}.max-w-md{max-width:28rem}.cursor-text{cursor:text}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.gap-3{gap:0.75rem}.rounded{border-radius:0.25rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-\[\#7747ff\]{--tw-bg-opacity:1;background-color:rgb(119 71 255 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-\[11px\]{padding:11px}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.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-normal{font-weight:400}.leading-\[140\%\]{line-height:140%}.leading-\[18px\]{line-height:18px}.tracking-\[0px\]{letter-spacing:0px}.text-\[\#1e0e4b\]{--tw-text-opacity:1;color:rgb(30 14 75 / var(--tw-text-opacity))}.text-\[\#7747ff\]{--tw-text-opacity:1;color:rgb(119 71 255 / var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline-0{outline-width:0px}.ring-gray-900{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39 / var(--tw-ring-opacity))}.ring-offset-2{--tw-ring-offset-width:2px}.focus\:ring-2:focus{--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(2px + 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)}