검색 구성 요소

카테고리

구성 요소 2단계 인증

2단계 인증

인증을 위한 추가 보안 계층

Two-Factor Authentication 구성 요소

마이크로 인터랙션과 파스텔 색상 구성표로 설계된 Two-Factor Authentication Component로, 포트폴리오에서 작업이나 제품을 전시하는 데 적합합니다. 이 구성 요소에는 여러 대화형 요소와 어두운 테마를 지원하는 반응형 디자인이 포함되어 있습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
                <input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
            </div>
            <button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
        </form>
        <div class="mt-4 flex items-center justify-between">
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
            <a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
    </div>
</div>

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 보색, 복잡한 UI, 반응형 디자인 및 다크 모드 지원을 제공하는 소셜 미디어를 위한 스큐어모픽 2단계 인증 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white text-center">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your registered email or phone number.</p>
            <div class="relative">
              <input autocomplete="off" id="code" name="code" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:outline-none focus:borer-rose-600" placeholder="Enter code" />
              <label for="code" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 dark:peer-focus:text-gray-400 peer-focus:text-sm">Authentication Code</label>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Haven't received the code? <a href="#" class="text-teal-500 dark:text-teal-400 hover:text-teal-600 dark:hover:text-teal-500">Resend Code</a></p>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="bg-blue-500 dark:bg-blue-600 text-white rounded-md px-2 py-1 text-sm hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 dark:focus:ring-blue-800">Verify Code</button>
            <button class="flex-1 text-center text-gray-600 dark:text-gray-400 text-sm hover:text-gray-800 dark:hover:text-gray-200">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-16 h-16 mx-auto rounded-full mb-3 border-4 border-purple-500 dark:border-purple-400">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white font-mono">Authenticate</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter the verification code sent to your device.</p>
    </div>
    
    <form>
      <div class="flex space-x-4 mb-6">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
        <input type="text" class="w-1/6 text-center form-input border border-gray-400 dark:border-gray-600 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white font-mono text-xl" maxlength="1">
      </div>
      
      <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-200 font-mono">Verify Code</button>
    </form>
    
    <div class="mt-6 text-center">
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Resend Code</a>
      <span class="text-gray-500 dark:text-gray-400 text-sm mx-2 font-mono">|</span>
      <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline text-sm font-mono">Need Help?</a>
    </div>
    
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>Secure authentication powered by <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline">OurApp</a></p>
      <img src="https://picsum.photos/seed/authentication/200/50" alt="App Logo" class="mt-3 mx-auto">
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

전자 상거래 플랫폼에 적합한 glassmorphism 스타일로 설계된 간단한 2단계 인증 구성 요소입니다. 단색 색 구성표가 특징이며 다크 모드를 지원하여 반응합니다.

열다 미리 보기

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
    <div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
                <input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
        </div>
    </div>
</body>
</html>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Secure your account with an additional layer of protection.</p>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="phone">Phone Number</label>
            <input type="text" id="phone" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter your phone number" />
        </div>
        <div class="mb-6">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="code">Authentication Code</label>
            <input type="text" id="code" class="w-full p-2 rounded bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Enter the authentication code" />
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Verify</button>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Or</p>
            <a href="#" class="text-blue-500 hover:underline">Use an Authenticator App</a>
        </div>
        <div class="mt-6">
            <img src="https://picsum.photos/200/100" alt="Random image" class="rounded-lg shadow-md dark:shadow-lg" />
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

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

열다 미리 보기

                <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단계 인증 구성 요소는 블로그 또는 콘텐츠 소비에 적합한 회색조를 사용하여 어두운 모드에서 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하는 반응형 2단계 인증 구성 요소입니다. 미니멀리스트/플랫 디자인, 단색 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있는 복잡한 레이아웃이 특징입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
    <div class="flex justify-center space-x-2 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
      Verify Code
    </button>
    <div class="mt-6 text-center">
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
      <span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
    </div>
  </div>
</div>

Two-Factor Authentication 구성 요소

매력적인 마이크로 인터랙션과 보색으로 설계된 Two-Factor Authentication 구성 요소입니다. 반응형이며 다크 모드를 지원하여 포트폴리오에서 작업이나 제품을 표시하는 데 적합합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
        <div class="p-6">
            <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.</p>
            <div class="flex justify-between items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
            </div>
            <form>
                <input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
                <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
            </form>
            <div class="mt-4 flex justify-between">
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
            </div>
        </div>
    </div>
</div>

Two-Factor Authentication 구성 요소

3D 디자인 요소와 트라이어딕 색 구성표를 갖춘 반응형 2단계 인증 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg relative transform transition-all duration-300 hover:scale-105" style="transform-style: preserve-3d;">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-50 rounded-lg" style="transform: translateZ(-10px);"></div>
    <h2 class="text-2xl font-bold text-center mb-6 text-gray-800 dark:text-white">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the 6-digit code sent to your device.</p>
    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent text-gray-800 dark:text-white">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300">Verify Code</button>
    <p class="text-center text-gray-600 dark:text-gray-300 mt-4 text-sm">Didn't receive a code? <a href="#" class="text-blue-600 hover:underline">Resend</a></p>
  </div>
</div>