پیشنمایش زنده
کد HTML
<div class="w-64 h-80 bg-pink-50 rounded shadow flex flex-col justify-between p-3" id="login">
<a class="border border-pink-500 bg-gray-50 hover:bg-pink-100 rounded text-pink-500 p-2 font-bold flex flex-row gap-3 justify-center" href="#">
<span>Log in with</span>
<svg class="w-6 h-6 fill-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path class="" 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">
</path>
</svg>
</a>
<span class="text-center text-sm font-bold text-pink-500 opacity-50">or</span>
<form method="post" action="" class="text-pink-500">
<label for="email" class="text-xs font-bold after:content-['*']">Mail </label>
<input required="" type="email" class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-pink-500">
<label for="password" class="text-xs font-bold after:content-['*']">Password </label>
<input required="" type="password" class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-pink-500">
<a class="block text-right text-xs text-pink-500 text-right mb-4" href="#">Forgot Password?</a>
<button class="w-full rounded bg-pink-500 text-pink-50 p-2 text-center font-bold hover:bg-pink-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-pink-500 {
--tw-border-opacity: 1;
border-color: rgb(236 72 153 / var(--tw-border-opacity))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-pink-50 {
--tw-bg-opacity: 1;
background-color: rgb(253 242 248 / var(--tw-bg-opacity))
}
.bg-pink-500 {
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / 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-pink-50 {
--tw-text-opacity: 1;
color: rgb(253 242 248 / var(--tw-text-opacity))
}
.text-pink-500 {
--tw-text-opacity: 1;
color: rgb(236 72 153 / 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-pink-100:hover{--tw-bg-opacity:1;background-color:rgb(252 231 243 / var(--tw-bg-opacity))}.hover\:bg-pink-400:hover{--tw-bg-opacity:1;background-color:rgb(244 114 182 / 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-pink-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(236 72 153 / var(--tw-ring-opacity))}