CCHub Logo CCHub Tailwind Collection
구성 요소 2단계 인증 Two-Factor Authentication 구성 요소

Two-Factor Authentication 구성 요소

소셜 미디어 인터페이스에 적합한 흙색의 레트로 스타일로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

관련 구성 요소

Two-Factor Authentication 구성 요소

소셜 미디어 애플리케이션을 위한 복잡하고 반응형이 빠른 레트로 테마의 2단계 인증 구성 요소로, Tailwind CSS를 사용하는 다크 모드와 유사한 색 구성표를 사용합니다. 여러 대화형 요소를 포함하며 picsum.photos 및 randomuser.me 의 이미지를 사용합니다.

열다

Two-Factor Authentication 구성 요소

생생한 색 구성표에서 Neumorphism으로 설계된 반응형 2단계 인증 구성 요소로, 비즈니스 웹 사이트에 적합하고 Tailwind CSS로 다크 모드를 지원합니다.

열다

Two-Factor Authentication 구성 요소

소셜 미디어용으로 설계된 간단하고 반응이 빠른 이중 인증 구성 요소는 3D 디자인 스타일과 회색조 색 구성표와 인터페이스합니다.

열다