پیشنمایش زنده
کد HTML
<form
class="bg-white dark:bg-zinc-900 shadow-2xl rounded-2xl overflow-hidden border-4 border-blue-400 dark:border-blue-800"
>
<div class="px-8 py-10 md:px-10">
<h2
class="text-4xl font-extrabold text-center text-zinc-800 dark:text-white"
>
Welcome Back!
</h2>
<p class="text-center text-zinc-600 dark:text-zinc-400 mt-3">
We missed you, sign in to continue.
</p>
<div class="mt-10">
<div class="relative">
<label
class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
for="email"
>Email</label
>
<input
placeholder="you@example.com"
class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
name="email"
id="email"
type="email"
/>
</div>
<div class="mt-6">
<label
class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
for="password"
>Password</label
>
<input
placeholder="••••••••"
class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
name="password"
id="password"
type="password"
/>
</div>
<div class="mt-10">
<button
class="w-full px-4 py-3 tracking-wide text-white transition-colors duration-200 transform bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg hover:from-blue-700 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-800"
type="submit"
>
Let's Go
</button>
</div>
</div>
</div>
<div class="px-8 py-4 bg-blue-200 dark:bg-zinc-800">
<div class="text-sm text-blue-900 dark:text-blue-300 text-center">
Don't have an account?
<a class="font-medium underline" href="#">Sign up</a>
</div>
</div>
</form>
کد CSS
.relative {
position: relative;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.block {
display: block;
}
.w-full {
width: 100%;
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.overflow-hidden {
overflow: hidden;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-blue-400 {
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.bg-blue-200 {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-600 {
--tw-gradient-from: #2563eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-cyan-600 {
--tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.text-center {
text-align: center;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-extrabold {
font-weight: 800;
}
.font-medium {
font-weight: 500;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-zinc-600 {
--tw-text-opacity: 1;
color: rgb(82 82 91 / var(--tw-text-opacity));
}
.text-zinc-800 {
--tw-text-opacity: 1;
color: rgb(39 39 42 / var(--tw-text-opacity));
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-colors {
transition-property: color, background-color, border-color, fill, stroke,
-webkit-text-decoration-color;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:from-blue-700:hover {
--tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-cyan-700:hover {
--tw-gradient-to: #0e7490 var(--tw-gradient-to-position);
}
.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring: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(3px + 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-4: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(4px + 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-blue-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
}
.focus\:ring-opacity-50:focus {
--tw-ring-opacity: 0.5;
}
@media (min-width: 768px) {
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-blue-800 {
--tw-border-opacity: 1;
border-color: rgb(30 64 175 / var(--tw-border-opacity));
}
.dark\:border-zinc-600 {
--tw-border-opacity: 1;
border-color: rgb(82 82 91 / var(--tw-border-opacity));
}
.dark\:bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.dark\:bg-zinc-900 {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
.dark\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-zinc-200 {
--tw-text-opacity: 1;
color: rgb(228 228 231 / var(--tw-text-opacity));
}
.dark\:text-zinc-400 {
--tw-text-opacity: 1;
color: rgb(161 161 170 / var(--tw-text-opacity));
}
.dark\:focus\:border-blue-400:focus {
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.dark\:focus\:ring-blue-800:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
}
}