구성 요소 캡차 CAPTCHA 구성 요소 - Brutalism, Vibrant, Moderate

CAPTCHA 구성 요소 - Brutalism, Vibrant, Moderate

생생한 색상과 적당한 복잡성을 가진 대시보드를 위한 Brutalist CAPTCHA 구성 요소입니다.

미리 보기

HTML 코드

<div class="dark:bg-zinc-900 p-6 rounded-lg shadow-xl dark:shadow-none border-4 border-black dark:border-white">
  <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">Verify You Are Not a Robot</h2>
  <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <div id="captcha-image" class="w-full md:w-1/2 h-32 bg-gray-300 dark:bg-zinc-700 flex items-center justify-center text-black dark:text-white text-4xl font-mono border-2 border-black dark:border-white">
      <!-- CAPTCHA image or text will be generated here -->
      <span class="select-none">Aj9pQ</span>
    </div>
    <div class="w-full md:w-1/2">
      <label for="captcha-input" class="block text-sm font-medium text-black dark:text-white mb-2">Enter the text in the image:</label>
      <input type="text" id="captcha-input" class="w-full px-4 py-2 border-2 border-black dark:border-white bg-white dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
    </div>
  </div>
  <button class="mt-6 w-full bg-yellow-500 text-black dark:bg-yellow-600 dark:text-zinc-900 font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-500 transition duration-300">
    Submit
  </button>
  <button class="mt-4 w-full text-black dark:text-white font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-gray-200 dark:hover:bg-zinc-700 transition duration-300">
    Refresh CAPTCHA
  </button>
</div>

관련 구성 요소

CAPTCHA 구성 요소

소셜 미디어용으로 설계된 스큐어모픽 CAPTCHA 구성 요소는 트라이어드 색 구성표와 인터페이스하며, 여러 대화형 요소와 어두운 테마 지원을 특징으로 합니다.

열다

CAPTCHA 구성 요소

소셜 미디어 플랫폼에 적합한 트라이어딕 색 구성표가 있는 Glassmorphism 스타일의 CAPTCHA 구성 요소입니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징이며, 중간 정도의 복잡성과 일부 상호 작용 기능이 있습니다. 디자인은 반응형이며 다크 모드 지원을 포함합니다.

열다

CAPTCHA 구성 요소

머티리얼 디자인에서 영감을 받은 반응형 CAPTCHA 구성요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다