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

CAPTCHA 구성 요소

반응형 CAPTCHA 구성 요소에는 마이크로 인터랙션, 어두운 테마 지원 및 임의의 자리 표시자 이미지가 있습니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">CAPTCHA Challenge</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Please verify you are not a robot.</p>
    <div class="flex items-center justify-center space-x-4 mb-4">
      <img src="https://picsum.photos/150" alt="CAPTCHA image" class="rounded">
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
        Reload
      </button>
    </div>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter the characters...">
    <button class="mt-4 w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
      Submit
    </button>
  </div>
</div>

관련 구성 요소

CAPTCHA 구성 요소 - Brutalism, Vibrant, Moderate

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

열다

CAPTCHA 구성 요소

포트폴리오 웹사이트의 보안을 강화하기 위해 머티리얼 디자인 스타일의 CAPTCHA 구성 요소를 사용했으며, Tailwind CSS를 사용한 어두운 테마와 반응형 디자인을 특징으로 합니다.

열다

Neumorphism CAPTCHA 구성 요소

전자 상거래 사이트를 위해 뉴모픽 스타일로 설계된 반응형의 복잡한 CAPTCHA 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다