پیشنمایش زنده
کد HTML
<div id="login" class="w-64 h-80 bg-sky-50 rounded shadow flex flex-col justify-between p-3">
<a href="#" class="border border-sky-500 bg-sky-50 hover:bg-sky-100 rounded text-sky-500 p-2 font-bold flex flex-row gap-3 justify-center">
<span>Log in with</span>
<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6 fill-current">
<path d="M100,10.71V89.29A10.73,10.73,0,0,1,89.29,100H69.81V64.85H81.46L83.68,50.3H69.85V40.85c0-4,1.94-7.85,8.15-7.85h6.27V20.65a76.54,76.54,0,0,0-11.2-1c-11.42,0-18.88,7-18.88,19.57V50.3H41.49V64.85h12.7V100H10.71A10.73,10.73,0,0,1,0,89.29V10.71A10.73,10.73,0,0,1,10.71,0H89.29A10.73,10.73,0,0,1,100,10.71Z" class="">
</path>
</svg>
</a>
<span class="text-center text-sm font-bold text-sky-500 opacity-50">or</span>
<form class="text-sky-500" action="" method="post">
<label class="text-xs font-bold after:content-['*']" for="email">Mail </label>
<input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="email" required="">
<label class="text-xs font-bold after:content-['*']" for="password">Password </label>
<input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="password" required="">
<a href="#" class="block text-right text-xs text-sky-500 text-right mb-4">Forgot Password?</a>
<button class="w-full rounded bg-sky-500 text-sky-50 p-2 text-center font-bold hover:bg-sky-400">Log In</button>
</form>
</div>
کد CSS
.mb-2 {
margin-bottom: 0.5rem
}
.mb-4 {
margin-bottom: 1rem
}
.mt-1 {
margin-top: 0.25rem
}
.block {
display: block
}
.flex {
display: flex
}
.h-6 {
height: 1.5rem
}
.h-80 {
height: 20rem
}
.w-6 {
width: 1.5rem
}
.w-64 {
width: 16rem
}
.w-full {
width: 100%
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-3 {
gap: 0.75rem
}
.rounded {
border-radius: 0.25rem
}
.border {
border-width: 1px
}
.border-sky-500 {
--tw-border-opacity: 1;
border-color: rgb(14 165 233 / var(--tw-border-opacity))
}
.bg-sky-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 249 255 / var(--tw-bg-opacity))
}
.bg-sky-500 {
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
}
.fill-current {
fill: currentColor
}
.p-2 {
padding: 0.5rem
}
.p-3 {
padding: 0.75rem
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.text-sky-50 {
--tw-text-opacity: 1;
color: rgb(240 249 255 / var(--tw-text-opacity))
}
.text-sky-500 {
--tw-text-opacity: 1;
color: rgb(14 165 233 / var(--tw-text-opacity))
}
.opacity-50 {
opacity: 0.5
}
.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\:content-\[\'\*\'\]::after{--tw-content:'*';content:var(--tw-content)}.hover\:bg-sky-100:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254 / var(--tw-bg-opacity))}.hover\:bg-sky-400:hover{--tw-bg-opacity:1;background-color:rgb(56 189 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-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233 / var(--tw-ring-opacity))}