CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 Bauhaus CAPTCHA 구성 요소

Bauhaus CAPTCHA 구성 요소

문서/위키 사이트를 위한 Bauhaus 스타일의 간단하고 기능적인 CAPTCHA 구성 요소로, 기하학적 형태, 고대비, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg border-2 border-black dark:border-white relative overflow-hidden">
    
    <!-- Bauhaus geometric elements -->
    <div class="absolute top-0 left-0 w-16 h-16 bg-red-500 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-blue-500 transform translate-x-1/2 translate-y-1/2 -rotate-30"></div>
    <div class="absolute top-1/2 left-1/2 w-12 h-12 bg-yellow-500 z-0 transform -translate-x-1/2 -translate-y-1/2 rotate-12"></div>

    <div class="relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold mb-4 text-center dark:text-white uppercase tracking-wider">
        Are you Human?
      </h2>
      
      <p class="mb-6 text-sm text-center text-gray-700 dark:text-gray-300">
        Please click the square containing a &quot;Circle&quot;.
      </p>

      <div class="grid grid-cols-3 gap-2 mb-6">
        <!-- Example CAPTCHA grid items -->
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white transform rotate-45 group-hover:rotate-0 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 dark:ring-blue-400 group-hover:scale-110 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-2 md:w-10 md:h-2 bg-red-500 ring-2 ring-red-500 dark:ring-red-400 group-hover:w-full transition-all duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-6 h-6 md:w-8 md:h-8 border-4 border-yellow-500 dark:border-yellow-400 rounded-lg group-hover:rotate-180 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white clip-path-polygon-[50%_0%,_0%_100%,_100%_100%] group-hover:scale-105 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 border-4 border-red-500 dark:border-red-400 rounded-full group-hover:animate-spin-slow"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 relative">
            <div class="absolute inset-0 bg-yellow-500 dark:bg-yellow-400 group-hover:rotate-45 transition-transform duration-200"></div>
            <div class="absolute inset-0 bg-blue-500 dark:bg-blue-400 group-hover:-rotate-45 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-4 border-black dark:border-white relative">
            <div class="absolute w-2 h-2 rounded-full bg-black dark:bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-yellow-500 dark:bg-yellow-400 group-hover:scale-105 transition-transform duration-200"></div>
        </button>
      </div>

      <div class="flex justify-between items-center">
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Refresh
        </button>
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-blue-500 text-white dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Skeuomorphic CAPTCHA 구성 요소

적당히 복잡한 스큐어모픽 CAPTCHA 구성 요소는 기업용 블루 톤으로 설계되었으며 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징이며 실제 디지털 요소를 모방합니다.

열다

CAPTCHA 구성 요소

음식/레스토랑 웹사이트를 위한 간단하고 깔끔한 모노스페이스 테마의 CAPTCHA 구성 요소로, 그레이스케일 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

레트로/빈티지 CAPTCHA 구성 요소

소셜 미디어 인터페이스를 위해 설계된 레트로 스타일의 CAPTCHA 구성 요소로, 생생한 색상과 반응형 디자인 및 어두운 테마 지원이 있는 복잡한 레이아웃을 특징으로 합니다.

열다