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

Retro CAPTCHA 구성 요소

레트로/빈티지 미학과 파스텔 색상으로 스타일링된 CAPTCHA 구성 요소로, 다크 모드를 지원하는 데이터 시각화 대시보드를 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
    <p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
    <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
    </div>
    <div class="flex flex-col items-center mt-6">
        <label class="flex items-center mb-4">
            <input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
            <span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
        </label>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    </div>
    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>

관련 구성 요소

CAPTCHA 구성 요소

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

열다

ArtDecoCaptcha컴포넌트

아르데코 디자인 미학을 갖춘 간단하고 반응이 빠른 CAPTCHA 구성 요소로, 비즈니스/기업 웹사이트에 적합한 가을 색상을 사용하며 다크 모드를 지원합니다.

열다

Brutalist CAPTCHA 구성 요소

회색조 색 구성표로 설계된 원시적이고 대담한 CAPTCHA 구성 요소로, 사용자 확인을 위한 대화형 기능을 포함하여 대시보드 인터페이스에 적합합니다.

열다