<div class="min-h-screen bg-gray-900">
  <div class="bg-indigo-200 md:w-2/3 w-2/3  mx-auto p-10 my-auto rounded-b">

    <div class="mx-auto text-center text-4xl font-bold text-blue-500 my-2 mb-8">Login
    </div>
    <div>
      <form action="">
        <div class="bg-blue-500 px-2 py-1  rounded inline-block">
          <label for="input" class="text-md font-bold text-gray-100 tracking-wide">Username</label>
        </div>

        <input type="text" id="input" placeholder="Username" class="my-3 md:flex w-full rounded p-2 border-2 border-blue-500 outline-none focus:border-4 shadow-lg">

        <div class="bg-blue-500 px-2 py-1  rounded inline-block mt-3">
          <label for="password" class="text-md font-bold text-gray-100 tracking-wide">Password</label>
        </div>

        <input type="text" id="password" placeholder="Password" class="my-3 md:flex w-full rounded p-2 border border-4 border-blue-500 outline-none shadow-lg">
        <div class="flex space-between justify-center space-x-8">
          <button class="mt-4 text-xl font-bold bg-gray-900 rounded text-gray-100 tracking-wide px-6 py-2 border-b-2 border-blue-500 shadow hover:shadow-lg hover:bg-gray-200 hover:text-blue-600">Login</button>
          <button class="mt-4 text-xl font-bold bg-gray-900 rounded text-gray-100 tracking-wide px-6 py-2 border-b-2 border-blue-500 shadow hover:shadow-lg hover:bg-gray-200 hover:text-blue-600 hover:shadow-lg">Signup</button>
        </div>

      </form>
    </div>
  </div>
</div>
<div class="min-h-screen bg-gray-900">
  <div class="bg-indigo-200 md:w-2/3 w-2/3  mx-auto p-10 my-auto rounded-b">

    <div class="mx-auto text-center text-4xl font-bold text-blue-500 my-2 mb-8">Login
    </div>
    <div>
      <form action="">
        <div class="bg-blue-500 px-2 py-1  rounded inline-block">
          <label for="input" class="text-xl font-bold text-gray-100 tracking-wide">Username</label>
        </div>

        <input type="text" id="input" placeholder="Username" class="my-3 md:flex w-full rounded p-2 border-2 border-blue-500">

        <div class="bg-blue-500 px-2 py-1  rounded inline-block mt-3">
          <label for="password" class="text-xl font-bold text-gray-100 tracking-wide">Password</label>
        </div>

        <input type="text" id="password" placeholder="Password" class="my-3 md:flex w-full rounded p-2 border border-4 border-blue-500">
        <div class="flex space-between justify-center space-x-8">
          <button class="mt-4 text-xl font-bold bg-gray-900 rounded text-gray-100 tracking-wide px-6 py-2 border-b-2 border-blue-500 shadow hover:shadow-lg hover:bg-gray-800 hover:text-gray-300">Login</button>
          <button class="mt-4 text-xl font-bold bg-gray-900 rounded text-gray-100 tracking-wide px-6 py-2 border-b-2 border-blue-500 shadow hover:shadow-lg hover:bg-gray-800 hover:text-gray-300">Signup</button>
        </div>

      </form>
    </div>
  </div>
</div>

// *{
//   border: 1px solid red;
// }