Componente de inicio de sesión social

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 ease-in-out transform hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="md:flex">
      <div class="w-full p-8 md:w-2/3 lg:w-3/5 relative">
        <div class="flex items-center justify-between mb-8">
          <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Join Us!</h2>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a>
        </div>

        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 mb-8 max-w-[200px]">Connect with friends and the world around you on our social platform.</p>

        <div class="space-y-4 mb-8">
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 62.1l-65.7 65.7c-31.5-29.2-76.3-46.7-100.6-46.7-65.1 0-118.8 52.8-118.8 118s52.7 118 118.8 118c50.7 0 86.8-24.3 103.5-46.7h-170.8V256h240.8z"></path></svg>
            Sign in with Google
          </button>
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.66S260.43 0 223.34 0C154.2 0 110.18 41.13 110.18 106.6V188H22.4v92h87.78V512h109.14V288z"></path></svg>
            Sign in with Facebook
          </button>
        </div>

        <div class="relative flex justify-center text-xs uppercase mb-8">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
          <div class="absolute inset-y-0 left-0 right-0 border-t border-gray-300 dark:border-gray-600 flex items-center -z-10"></div>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
            <div class="mt-1">
              <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
            <div class="mt-1">
              <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
          </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-sapphire border-gray-300 dark:border-gray-600 rounded focus:ring-sapphire dark:focus:ring-sapphire form-checkbox dark:bg-gray-700 dark:checked:bg-sapphire">
              <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-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-base font-semibold text-white bg-emerald hover:bg-emerald-dark focus:outline-none focus:ring- sapphire focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
              Sign in
            </button>
          </div>
        </form>
      </div>
      <div class="hidden md:block md:w-1/3 lg:w-2/5 relative overflow-hidden rounded-r-xl bg-gradient-to-br from-emerald to-sapphire p-8 flex items-end justify-center dark:from-emerald-dark dark:to-sapphire-dark">
        <div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
        <div class="relative z-10 text-white text-center pb-12">
          <h3 class="text-2xl font-bold mb-4 drop-shadow-lg">Connect & Share</h3>
          <p class="text-sm mb-6 opacity-90 drop-shadow-md">Dive into a world of endless connections and vibrant communities. Your journey starts here.</p>
          <div class="relative w-28 h-28 mx-auto mb-4 border-4 border-white dark:border-gray-dark rounded-full overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <span class="absolute bottom-1 right-1 block w-4 h-4 bg-lime-400 border-2 border-white dark:border-gray-dark rounded-full"></span>
          </div>
          <p class="font-semibold">Join Mark Today!</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Jewel Tones */
  .bg-emerald {
    background-color: #00A36C;
  }
  .hover\:bg-emerald-dark:hover {
    background-color: #008C5C;
  }
  .from-emerald {
    --tw-gradient-from: #00A36C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 163 108 / 0) var(--tw-gradient-to-position);
  }
  dark .dark\:from-emerald-dark {
    --tw-gradient-from: #008C5C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 140 92 / 0) var(--tw-gradient-to-position);
  }

  .to-sapphire {
    --tw-gradient-to: #0F52BA var(--tw-gradient-to-position);
  }
  dark .dark\:to-sapphire-dark {
    --tw-gradient-to: #0A3C9E var(--tw-gradient-to-position);
  }

  .text-sapphire {
    color: #0F52BA;
  }
  .focus\:ring-sapphire:focus {
    --tw-ring-color: #0F52BA;
  }
  dark .checked\:bg-sapphire:checked {
    background-color: #0F52BA;
  }
</style>