پیشنمایش زنده
کد HTML
<div class="card px-8 py-6 rounded-lg bg-gray-800 w-72">
<h1 class="text-center font-bold text-3xl text-white">Login</h1>
<form class="my-6">
<input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Name" type="text">
<input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Email" type="email">
<input class="p-2 my-2 rounded w-[100%] focus:outline-blue-600" placeholder="Password" type="password">
<button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold p-2 mt-3 rounded w-[100%]">Login</button>
</form>
</div>
کد CSS
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.mt-3 {
margin-top: 0.75rem
}
.w-72 {
width: 18rem
}
.w-\[100\%\] {
width: 100%
}
.rounded {
border-radius: 0.25rem
}
.rounded-lg {
border-radius: 0.5rem
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.text-center {
text-align: center
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.font-bold {
font-weight: 700
}
.font-semibold {
font-weight: 600
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.focus\:outline-blue-600:focus {
outline-color: #2563eb
}