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

CAPTCHA 구성 요소

머티리얼 디자인 원칙과 Tailwind CSS를 사용하여 스타일이 지정된 CAPTCHA 구성 요소로, 전자 상거래 웹사이트에 적합하며 어두운 테마 지원 및 반응형 디자인이 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
    <div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
        </div>
        <div class="my-4">
            <label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
            <input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
        </div>
        <button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
    </div>
</div>

관련 구성 요소

ArtDecoCaptcha컴포넌트

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

열다

CAPTCHA 구성 요소

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

열다

CAPTCHA 구성 요소

머티리얼 디자인에서 영감을 받은 CAPTCHA 구성 요소로, 단색 색 구성표가 있으며 블로그 또는 콘텐츠 사이트에 적합합니다. 확인란, reCAPTCHA와 같은 'I'm not a robot' 텍스트, 자리 표시자 이미지 확인 영역이 있습니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다