Компонент двухфакторной аутентификации
Компонент двухфакторной аутентификации, разработанный в скевоморфном стиле, подходит для приложений электронной коммерции, использует цветовую схему в оттенках серого и сложные интерактивные элементы. Он отличается адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
HTML-код
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-5">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email to proceed with your purchase.</p>
<div class="flex items-center mb-4">
<img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</div>
<label class="block mb-2 text-gray-700 dark:text-gray-300 font-medium" for="verification-code">Verification Code:</label>
<input type="text" id="verification-code" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="Enter your code" required />
<button class="mt-4 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200">Verify</button>
<div class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">
<p>Didn’t receive a code? <a href="#" class="text-gray-800 dark:text-gray-200 font-semibold">Resend</a></p>
</div>
</div>
</div>Связанные компоненты
Компонент двухфакторной аутентификации
Простой компонент двухфакторной аутентификации, разработанный в стиле стекломорфизма, подходит для платформ электронной коммерции. Он имеет монохроматическую цветовую схему и отзывчив с поддержкой темного режима.
Компонент двухфакторной аутентификации
Отзывчивый компонент двухфакторной аутентификации с неоново-светящейся яркой эстетикой темного режима, подходящий для приложений в социальных сетях. Есть поля ввода для чисел, кнопка повторной отправки кода и понятные инструкции.