Komponente des Anmeldeformulars - Musik/Audio-Thema

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-stone-900 dark:to-orange-950 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-stone-800 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-800 dark:text-orange-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
        <span class="block">Tune In</span>
        <span class="block text-xl sm:text-2xl text-orange-500 dark:text-orange-400">Create Your Account</span>
      </h2>
      <p class="text-sm text-stone-600 dark:text-stone-400">
        Unlock a world of music and podcasts.
      </p>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

      <div>
        <label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Username</label>
        <input type="text" id="username" name="username" autocomplete="username" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

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

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all 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-orange-600 border-stone-300 rounded dark:text-orange-500 dark:bg-stone-700 dark:border-stone-600 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
            Terms & Privacy
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white
                       bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
                       dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-400
                       transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
          Sign Up
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-stone-600 dark:text-stone-400">
      Already have an account?
      <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
        Sign In
      </a>
    </div>
  </div>
</div>