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

Material Design CAPTCHA 구성 요소

어두운 테마 지원을 포함하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 CAPTCHA 구성요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
    <div class="mt-4 mb-6">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
    </div>
    <div class="flex items-center justify-between w-full">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
    </div>
    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
        <p>If you can't read the text, refresh to get a new image.</p>
    </div>
</div>

관련 구성 요소

CAPTCHA 구성 요소

코드에서 영감을 받은 복잡한 CAPTCHA 구성 요소로, 캔디/달콤한 색 구성표가 있으며 소셜 미디어 인터페이스용으로 설계되었습니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 요소를 제공합니다.

열다

Skeuomorphic CAPTCHA 구성 요소

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

열다

Luxury_Premium_CAPTCHA_Weather_Component

날씨/기후 애플리케이션을 위한 복잡한 럭셔리 테마의 CAPTCHA 구성 요소로, 멋진 뉴트럴 색상, 세련된 타이포그래피, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 여기에는 시각적 챌린지, '현재 날씨' 디스플레이, '기후 데이터' 섹션과 같은 요소가 포함됩니다.

열다