پیشنمایش زنده
کد HTML
<div id="login" class="w-64 h-80 bg-indigo-50 rounded shadow flex flex-col justify-between p-3">
<form class="text-indigo-500" action="" method="post">
<fieldset class="border-4 border-dotted border-indigo-500 p-5">
<legend class="px-2 italic -mx-2">Welcome again!</legend>
<label class="text-xs font-bold after:content-['*'] after:text-red-400" for="email">Mail </label>
<input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="email" required="">
<label class="text-xs font-bold after:content-['*'] after:text-red-400" for="password">Password </label>
<input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="password" required="">
<a href="#" class="block text-right text-xs text-indigo-500 text-right mb-4">Forgot Password?</a>
<button class="w-full rounded bg-indigo-500 text-indigo-50 p-2 text-center font-bold hover:bg-indigo-400">Log In</button>
</fieldset>
</form>
</div>
کد CSS
.-mx-2{margin-left:-0.5rem;margin-right:-0.5rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:0.25rem}.block{display:block}.flex{display:flex}.h-80{height:20rem}.w-64{width:16rem}.w-full{width:100%}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.rounded{border-radius:0.25rem}.border-4{border-width:4px}.border-dotted{border-style:dotted}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255 / var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-5{padding:1.25rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-indigo-50{--tw-text-opacity:1;color:rgb(238 242 255 / var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.after\:text-red-400::after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}.after\:content-\[\'\*\'\]::after{--tw-content:'*';content:var(--tw-content)}.hover\:bg-indigo-400:hover{--tw-bg-opacity:1;background-color:rgb(129 140 248 / var(--tw-bg-opacity))}.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)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity))}