Bauhaus Incontri Autenticazione

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Main Container -->
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 max-w-sm w-full transform transition-all duration-300 ease-in-out hover:scale-105 border-4 border-yellow-400 dark:border-red-600">
    
    <!-- Header -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-red-500 rounded-full mx-auto flex items-center justify-center mb-4 text-white text-3xl font-bold dark:bg-red-700 transform rotate-45">
        <span class="transform -rotate-45">❤️</span>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 tracking-wide">
        MatchPoint
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400">
        Find your perfect connection.
      </p>
    </div>

    <!-- Tabs for Login/Signup -->
    <div class="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
      <button class="flex-1 py-3 px-4 text-center text-md font-semibold rounded-md transition-colors duration-200 ease-in-out bg-yellow-400 text-gray-900 dark:bg-yellow-600 dark:text-white">
        Login
      </button>
      <button class="flex-1 py-3 px-4 text-center text-md font-medium text-gray-700 dark:text-gray-300 rounded-md transition-colors duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600">
        Sign Up
      </button>
    </div>

    <!-- Form Area -->
    <form 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 id="email" name="email" type="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Password
        </label>
        <input id="password" name="password" type="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-red-500 focus:ring-red-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white
                       bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                       dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-red-700 transition-colors duration-200 transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <!-- Separator -->
    <div class="mt-8 relative">
      <div class="absolute inset-0 flex items-center">
        <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 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
          Or continue with
        </span>
      </div>
    </div>

    <!-- Social Login Buttons -->
    <div class="mt-6 grid grid-cols-2 gap-3">
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500
                       dark:bg-yellow-800 dark:border-yellow-700 dark:text-white dark:hover:bg-yellow-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H11.5v-6H10v-2.25h1.5V8.5c0-1.298.591-2.022 2.05-2.022h2.25v2.25h-1.5c-.3 0-.75.075-.75.75v1.072h2.25l-.3 2.25h-1.95V18z" />
          </svg>
          Facebook
        </button>
      </div>
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                       dark:bg-blue-800 dark:border-blue-700 dark:text-white dark:hover:bg-blue-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24h21.35c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0zM7.5 20.5H4V9h3.5v11.5zM5.75 7.5a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zm14 13H17V14c0-1.85-.82-2.93-2.16-2.93C13.56 11.07 13 12.06 13 13.5v7H9.5V9h3.5v1.5c.57-.96 1.48-1.52 2.7-1.52C17.26 9 18 10.3 18 13.2V20.5h2.5V13.2c0-3.26-2.12-4.7-4.9-4.7-2.3 0-3.9 1.25-4.13 2.1z" />
          </svg>
          LinkedIn
        </button>
      </div>
    </div>
  </div>
</div>