پیشنمایش زنده
کد HTML
<div
class="w-64 h-80 bg-indigo-50 rounded shadow flex flex-col justify-between p-3"
id="login"
>
<form method="post" action="" class="text-indigo-500">
<fieldset class="border-4 border-dotted border-indigo-500 p-5">
<legend class="px-2 italic -mx-2">Welcome again!</legend>
<label
for="email"
class="text-xs font-bold after:content-['*'] after:text-red-400"
>Mail
</label>
<input
required=""
type="email"
class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500"
/>
<label
for="password"
class="text-xs font-bold after:content-['*'] after:text-red-400"
>Password
</label>
<input
required=""
type="password"
class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500"
/>
<a
class="block text-right text-xs text-indigo-500 text-right mb-4"
href="#"
>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));
}