Компонент двухфакторной аутентификации

<div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <div class="text-center mt-8 mb-4">
      <svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
      </svg>
      <h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
      <p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <form class="space-y-6">
      <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
          </svg>
          Verify Code
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
        Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
      </p>
      <p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
        <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
      </p>
    </div>
  </div>
</div>


<style>
  /* This is an optional style for better visual of Art Deco inputs, 
     though the core design is pure Tailwind */
  .ArtDecoInput {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* This clip-path attempts a more geometric shape; 
       Adjust values for desired effect. Pure CSS for complex shapes is limited. */
    /* For simpler rounded squares, remove clip-path */
  }
  .dark .ArtDecoInput {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  }
</style>