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

<div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48"
          src="https://picsum.photos/400/500?grayscale&blur=5"
          alt="Abstract geometric pattern">
      </div>
      <div class="p-6 md:p-8 flex-1">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
          <svg class="w-8 h-8 text-indigo-400" 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="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
            </path>
          </svg>
        </div>

        <p class="text-gray-300 mb-6 text-sm md:text-base">
          A security code has been sent to your registered email address.
          Please enter it below to complete your login.
        </p>

        <form>
          <div class="grid grid-cols-6 gap-3 mb-6">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
          </div>

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
              Code</a>
            <span class="text-gray-400 hidden sm:inline-block">•</span>
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
              Authentication Method</a>
          </div>

          <button type="submit"
            class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
            Verify
          </button>
        </form>

        <p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
          Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</div>