پیشنمایش زنده
کد HTML
<div class="relative overflow-hidden w-64 h-80 rounded shadow flex flex-col justify-between p-3 after:absolute after:w-24 after:h-24 after:bg-sky-300 after:-z-10 after:rounded-full after:-top-4 after:-right-4 after:blur-xl border after:[box-shadow:-150px_50px_10px_100px_#7dd3fc]" id="login">
<a 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" 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-sky-500 opacity-50">or</span>
<form method="post" action="" class="text-gray-700">
<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-sky-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-sky-500">
<a class="block text-right text-xs text-sky-500 text-right mb-4" href="#">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
.relative {
position: relative
}
.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
}
.overflow-hidden {
overflow: hidden
}
.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-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity))
}
.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\:absolute::after {
content: var(--tw-content);
position: absolute
}
.after\:-right-4::after {
content: var(--tw-content);
right: -1rem
}
.after\:-top-4::after {
content: var(--tw-content);
top: -1rem
}
.after\:-z-10::after {
content: var(--tw-content);
z-index: -10
}
.after\:h-24::after {
content: var(--tw-content);
height: 6rem
}
.after\:w-24::after {
content: var(--tw-content);
width: 6rem
}
.after\:rounded-full::after {
content: var(--tw-content);
border-radius: 9999px
}
.after\:bg-sky-300::after {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(125 211 252 / var(--tw-bg-opacity))
}
.after\:blur-xl::after {
content: var(--tw-content);
--tw-blur: blur(24px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.after\:content-\[\'\*\'\]::after{--tw-content:'*';content:var(--tw-content)}.after\:\[box-shadow\:-150px_50px_10px_100px_\#7dd3fc\]::after{content:var(--tw-content);box-shadow:-150px 50px 10px 100px #7dd3fc}.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))}