پیشنمایش زنده
کد HTML
<div
class="w-80 rounded-lg shadow h-auto p-6 bg-white relative overflow-hidden"
>
<div class="flex flex-col justify-center items-center space-y-2">
<h2 class="text-2xl font-medium text-slate-700">Login</h2>
<p class="text-slate-500">Enter details below.</p>
</div>
<form class="w-full mt-4 space-y-3">
<div>
<input
class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300"
placeholder="Username"
id="username"
name="username"
type="text"
/>
</div>
<div>
<input
class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300"
placeholder="Password"
id="password"
name="password"
type="password"
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
class="mr-2 w-4 h-4"
id="remember"
name="remember"
type="checkbox"
/>
<span class="text-slate-500">Remember me </span>
</div>
<a class="text-blue-500 font-medium hover:underline" href="#"
>Forgot Password</a
>
</div>
<button
class="w-full justify-center py-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 rounded-md text-white ring-2"
id="login"
name="login"
type="submit"
>
login
</button>
<p class="flex justify-center space-x-1">
<span class="text-slate-700"> Have an account? </span>
<a class="text-blue-500 hover:underline" href="#">Sign Up</a>
</p>
</form>
</div>
کد CSS
.relative {
position: relative;
}
.mr-2 {
margin-right: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.flex {
display: flex;
}
.h-4 {
height: 1rem;
}
.h-auto {
height: auto;
}
.w-4 {
width: 1rem;
}
.w-80 {
width: 20rem;
}
.w-full {
width: 100%;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border-2 {
border-width: 2px;
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-6 {
padding: 1.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-medium {
font-weight: 500;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
}
.text-slate-700 {
--tw-text-opacity: 1;
color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / 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;
}
.ring-2 {
--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);
}
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.hover\:underline:hover {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.focus\:border-blue-300:focus {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.active\:bg-blue-700:active {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}