Composant d’authentification Skeuomorphism

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-10 font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-3xl p-10 max-w-md w-full transform transition duration-500 hover:scale-105 border-8 border-gray-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <svg class="w-20 h-20 mx-auto text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.045 6.705-3 9.5m0-9.5a5 5 0 115 5v4.5M12 11C9.49 14.49 8 17.5 8 21m4-10a5 5 0 015 5v4.5m-16-.5h16m-7 0h.01"></path></svg>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white mt-4">Welcome Back!</h1>
      <p class="text-gray-500 dark:text-gray-400 mt-2">Sign in to continue to your account.</p>
    </div>

    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your email">
      </div>

      <div class="mb-8">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Password</label>
        <input type="password" id="password" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your password">
      </div>

      <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
          <input id="remember_me" type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 dark:text-yellow-500 rounded border-gray-300 dark:border-gray-600 transition duration-150 ease-in-out">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <a href="#" class="text-sm text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-4 px-6 rounded-2xl focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 shadow-lg shadow-yellow-300/50 dark:shadow-lg dark:shadow-yellow-700/50">
        Sign In
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out font-bold">Sign Up</a>
    </div>
  </div>
</div>