Two-Factor Authentication 구성 요소

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <div class="flex items-center justify-center mb-4">
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-600 dark:via-yellow-600 dark:to-green-600 rounded-full flex items-center justify-center shadow-lg">
          <svg class="w-8 h-8 text-white" 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
          </svg>
        </div>
      </div>
      <h2 class="text-2xl font-extrabold text-center text-gray-900 dark:text-gray-100 uppercase tracking-wide">Two-Factor Authentication</h2>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
        Please enter the 6-digit code from your authenticator app.
      </p>
      <form class="space-y-4">
        <div class="flex justify-center space-x-2">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 1" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 2" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 3" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 4" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 5" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 6" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
        </div>
        <button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-semibold shadow-md
        bg-gradient-to-r from-purple-600 via-pink-500 to-red-500
        hover:from-purple-700 hover:via-pink-600 hover:to-red-600
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
        dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out text-lg">
          Verify Code
        </button>
      </form>
      <div class="text-center">
        <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
          Having trouble? Try another method
        </a>
      </div>
    </div>
  </div>
</div>