Authentication_Components_Component

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md transform transition duration-500 hover:scale-105">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-8">Join the Fun!</h2>

    <div class="space-y-6">
      <div>
        <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Email address">
      </div>

      <div>
        <label for="password" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Password">
      </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-purple-600 focus:ring-purple-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-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">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-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
          Sign In
        </button>
      </div>
    </div>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">Or sign in with</p>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Facebook">
          <i class="fab fa-facebook-f text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Google">
          <i class="fab fa-google text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-400 hover:bg-blue-500 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Twitter">
          <i class="fab fa-twitter text-xl"></i>
        </button>
      </div>
      <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Sign Up</a>
      </p>
    </div>
  </div>
</div>

<!-- Font Awesome for social icons (optional - only if you want the icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">