Fresh moth

<!-- From Uiverse.io by Javierrocadev - Tags: simple, blue, facebook, form, input, input effect , tailwind -->
<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>

.mt-1 {
  margin-top: 0.25rem;
}
.mb-2 {
  margin-bottom: calc(0.25rem * 2);
}
.mb-4 {
  margin-bottom: calc(0.25rem * 4);
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.h-6 {
  height: calc(0.25rem * 6);
}
.h-80 {
  height: calc(0.25rem * 80);
}
.w-6 {
  width: calc(0.25rem * 6);
}
.w-64 {
  width: calc(0.25rem * 64);
}
.w-full {
  width: 100%;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-3 {
  gap: calc(0.25rem * 3);
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-sky-500 {
  border-color: oklch(68.5% 0.169 237.323);
}
.bg-sky-50 {
  background-color: oklch(97.7% 0.013 236.62);
}
.bg-sky-500 {
  background-color: oklch(68.5% 0.169 237.323);
}
.fill-current {
  fill: currentcolor;
}
.p-2 {
  padding: calc(0.25rem * 2);
}
.p-3 {
  padding: calc(0.25rem * 3);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-sm {
  font-size: 0.875rem;
  line-height: var(--tw-leading, calc(1.25 / 0.875));
}
.text-xs {
  font-size: 0.75rem;
  line-height: var(--tw-leading, calc(1 / 0.75));
}
.font-bold {
  --tw-font-weight: 700;
  font-weight: 700;
}
.text-sky-50 {
  color: oklch(97.7% 0.013 236.62);
}
.text-sky-500 {
  color: oklch(68.5% 0.169 237.323);
}
.opacity-50 {
  opacity: 50%;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.after\:content-\[\'\*\'\]::after {
  --tw-content: '*';
  content: var(--tw-content);
}
@media (hover: hover) {
  .hover\:bg-sky-100:hover {
    background-color: oklch(95.1% 0.026 236.824);
  }
  .hover\:bg-sky-400:hover {
    background-color: oklch(74.6% 0.16 232.661);
  }
}
.focus\:ring-2:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-sky-500:focus {
  --tw-ring-color: oklch(68.5% 0.169 237.323);
}

<!-- From Uiverse.io by Javierrocadev - Tags: simple, blue, facebook, form, input, input effect , tailwind -->
<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>