2要素認証コンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">

  <!-- Main Card Container -->
  <div class="bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">

    <!-- Header Section -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-6 sm:p-8 border-b-2 border-zinc-300 dark:border-zinc-600 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/800/400?grayscale')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
      <div class="relative z-10 flex items-center mb-4">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-orange-600 dark:text-orange-400 mr-3 transform -rotate-12" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.335 5.965 3.129 8.243a12.003 12.003 0 0017.95-8.243c0-3.072-1.335-5.965-3.129-8.243z"></path>
        </svg>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Two-Factor Authentication</h2>
      </div>
      <p class="text-sm sm:text-base text-zinc-700 dark:text-zinc-300 max-w-md">
        For enhanced security, please enter the 6-digit code sent to your registered device.
      </p>
    </div>

    <!-- Body Section - OTP Input -->
    <div class="p-6 sm:p-8">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 object-cover">
        <div>
          <p class="text-sm text-zinc-700 dark:text-zinc-300">Verifying access for:</p>
          <p class="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Olivia Davis</p>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="otp-code" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Enter your 6-digit code</label>
          <div class="flex justify-center space-x-2 md:space-x-3">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" autocomplete="one-time-code" pattern="\d*">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <span class="flex items-center text-zinc-400 dark:text-zinc-500 text-3xl font-light mx-1 md:mx-2">-</span>
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
          </div>
        </div>

        <p class="text-sm text-center text-red-600 dark:text-red-400 mt-4" role="alert" aria-live="polite" id="error-message" style="display:none;">Invalid code. Please try again.</p>

        <div class="flex flex-col sm:flex-row sm:justify-between sm:space-x-4 space-y-4 sm:space-y-0">
          <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Verify Code
          </button>
          <button type="button" class="w-full sm:w-auto px-6 py-3 bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-600 dark:hover:bg-zinc-500 text-zinc-800 dark:text-zinc-200 font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Resend Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-zinc-600 dark:text-zinc-400">
          Need help? <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Contact Support</a> or <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Change Method</a>.
        </p>
      </div>
    </div>

    <!-- Footer Section (optional, for additional info) -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-4 sm:p-5 border-t-2 border-zinc-300 dark:border-zinc-600 text-center">
      <p class="text-xs text-zinc-500 dark:text-zinc-400">Your security is our priority. © 2023 Acme Events.</p>
    </div>

  </div>
</div>

<!-- Script for automatic focus and potential error display (purely illustrative, would need JS in a real app) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][type="text"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.data && e.data.match(/\d/)) { // Allow only digits
          if (index < inputs.length - 1) {
            inputs[index + 1].focus();
          }
        } else if (e.inputType === 'deleteContentBackward') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        } else {
          input.value = ''; // Clear non-digit input
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && input.value === '') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        }
      });
    });

    // Example of showing an error message (would be triggered by backend validation)
    // const errorMessage = document.getElementById('error-message');
    // document.querySelector('form').addEventListener('submit', (e) => {
    //   e.preventDefault();
    //   errorMessage.style.display = 'block'; // Or 'none' on success
    //   setTimeout(() => errorMessage.style.display = 'none', 3000); // Hide after a few seconds
    // });
  });
<\/script>