로그인/가입 구성 요소

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>

    <ul class="flex justify-center mb-6">
      <li class="mr-4">
        <a href="#" class="text-blue-500 dark:text-blue-400 border-b-2 border-blue-500 dark:border-blue-400 pb-1">Login</a>
      </li>
      <li>
        <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 pb-1">Sign Up</a>
      </li>
    </ul>

    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="[email protected]">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
          Forgot Password?
        </a>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
      <div class="flex justify-center space-x-4 mt-2">
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-red-600 dark:hover:bg-red-800">
          Google
        </button>
        <button class="bg-blue-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900">
          Facebook
        </button>
      </div>
    </div>
  </div>
</div>