1. Simple Login Page (Html with Tailwindcss)

<div class="flex h-full min-h-screen w-full items-center justify-center">
  <div class="flex h-[500px] w-[350px] flex-col justify-center gap-4">
    <h1 class="text-3xl font-bold">Welcome Back</h1>
    <p class="text-gray-600">Welcome Back! Please fill you details</p>
    <div class="flex flex-col gap-2">
      <label for="email" class="text-sm font-bold">Email</label>
      <input type="email" placeholder="Enter you Email" id="email" class="w-full rounded-[4px] border border-gray-300 px-3 py-2 focus:outline-none" />
    </div>
    <div class="flex flex-col gap-2">
      <label for="Password" class="text-sm font-bold">Password</label>
      <input type="password" placeholder="Enter you Password" id="Password" class="w-full rounded-[4px] border border-gray-300 px-3 py-2 focus:outline-none" />
    </div>
    <p class="text-sm font-bold">Forget Password</p>
    <button class="rounded-[4px] bg-gray-800 px-3 py-2 font-bold text-white hover:cursor-pointer hover:bg-gray-600">Login</button>
    <button class="text-bold rounded-[4px] border border-gray-500 bg-white px-3 py-2 hover:cursor-pointer hover:bg-gray-200">Sign in with Google</button>
    <p class="text-center text-sm text-gray-600">Don't have an account? <strong class="hover:cursor-pointer">Sign up for free</strong></p>
  </div>
</div>

Output