Formulaire de connexion/inscription minimaliste - Mode/Beauté

<div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden flex flex-col md:flex-row transition-all duration-300 transform md:hover:scale-105">
    <!-- Image Section - Visible on Larger Screens -->
    <div class="hidden md:flex md:w-1/2 bg-stone-100 dark:bg-stone-700 p-4 items-center justify-center">
      <img src="https://picsum.photos/400/600?grayscale&blur=2" alt="Fashion background" class="object-cover w-full h-full rounded-md shadow-inner opacity-80">
    </div>

    <!-- Form Section -->
    <div class="w-full md:w-1/2 p-6 sm:p-8 lg:p-10 text-stone-700 dark:text-stone-300">
      <h2 id="form-title" class="text-3xl sm:text-4xl font-light text-center mb-6 dark:text-stone-100">Welcome Back</h2>
      
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium mb-2">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </div>
        
        <div>
          <label for="password" class="block text-sm font-medium mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </div>
        
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-stone-600 dark:text-stone-400 focus:ring-stone-500 dark:focus:ring-stone-500 border-stone-300 dark:border-stone-600 rounded">
            <label for="remember-me" class="ml-2 block">Remember me</label>
          </div>
          
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200">Forgot your password?</a>
        </div>
        
        <div>
          <button type="submit"
                  class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white
                         bg-stone-700 hover:bg-stone-800 dark:bg-stone-500 dark:hover:bg-stone-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                         dark:focus:ring-offset-stone-800 transition-all duration-200 transform hover:-translate-y-0.5">
            Sign In
          </button>
        </div>
      </form>
      
      <div class="mt-8 text-center text-sm">
        <p>Don't have an account?
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ml-1">Sign Up</a>
        </p>
      </div>

      <div class="relative mt-8">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-stone-300 dark:border-stone-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 flex justify-center space-x-4">
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Google</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.48 10.92v3.28h3.36c-.19 1.14-.81 1.94-1.89 2.51v2.19h2.83c1.67-1.53 2.64-3.97 2.64-7.52 0-.91-.12-1.64-.33-2.34H12.48z"/>
            <path d="M5.25 12.00c0 .91.15 1.76.41 2.56l-3.33 2.59C1.65 15.35 1 13.78 1 12.00S1.65 8.65 2.33 7.37l3.33 2.59C5.4 10.24 5.25 11.09 5.25 12.00z"/>
            <path d="M12.48 4.73c1.83 0 3.25.79 4.35 1.7L19.5 3.5C18.06 2.22 16.27 1.5 12.48 1.5c-3.15 0-5.87 1.7-7.39 4.29l3.33 2.59C9.28 6.43 10.7 4.73 12.48 4.73z"/>
            <path d="M23.00 12.00c0-.75-.07-1.42-.2-2.07H12.48L12.48 14.28H21.0c-.23 1.29-.76 2.45-1.58 3.39l2.83 2.19c1.07-1.22 1.63-2.79 1.63-4.86z"/>
          </svg>
        </button>
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Facebook</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>