미니멀리스트 인증 양식

<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
  <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
    <div class="text-center mb-6 sm:mb-8">
      <!-- Optional: Logo (example using picsum.photos) -->
      <!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Sign In
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Welcome back! Please enter your details.
      </p>
    </div>

    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
        <input type="email" name="email" id="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div>
        <div class="flex items-center justify-between mb-1">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
              Forgot password?
            </a>
          </div>
        </div>
        <input type="password" name="password" id="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div class="flex items-center">
        <input id="remember-me" name="remember-me" type="checkbox"
                class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Not a member?
      <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
        Create an account
      </a>
    </p>
    
    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
                <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                    Or continue with
                </span>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-3">
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
                    </svg>
                    Sign in with GitHub
                </a>
            </div>
            <!-- Example for Google Icon (you would need the SVG) -->
            <!-- 
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
                    Sign in with Google
                </a>
            </div>
            -->
        </div>
    </div>

  </div>
</div>