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

CAPTCHA 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p>
    <div class="flex items-center justify-between mb-4"> 
      <img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" />
      <input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400">
    </div>
    <div class="flex flex-col items-center mb-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p>
      <div class="grid grid-cols-2 gap-2 mt-2">
        <img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
      </div>
    </div>
    <button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button>
    <div class="flex items-center justify-between mt-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700">
    </div>
  </div>
</div>

관련 구성 요소

Retro_Captcha_Component

오션/블루 톤의 레트로/빈티지 스타일 CAPTCHA 구성 요소로, 컨설팅/서비스 웹사이트를 위해 설계되었습니다. 왜곡된 이미지, 오디오 챌린지 및 입력 필드가 있는 복잡한 인터페이스가 특징입니다.

열다

CAPTCHA 구성 요소

깨끗하고 미니멀한 CAPTCHA 구성 요소로, 바다/블루 톤을 특징으로 하는 스위스/국제 타이포그래피 디자인 스타일입니다. 이벤트 및 컨퍼런스 웹사이트용으로 설계되었으며 반응형이며 다크 모드 지원이 포함되어 있습니다.

열다

CAPTCHA 구성 요소

머티리얼 디자인에서 영감을 받은 CAPTCHA 구성 요소는 소셜 미디어 애플리케이션을 위해 설계된 생생한 색 구성표입니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다