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

CAPTCHA 구성 요소

머티리얼 디자인 원칙과 비즈니스/기업 웹사이트를 위한 파스텔 색 구성표로 설계된 간단한 CAPTCHA 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
    <div class="mt-4 flex flex-col items-center">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
        <div class="mt-3 flex items-center">
            <label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
            <input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
        </div>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
    </div>
</div>

관련 구성 요소

Glassmorphism CAPTCHA 구성 요소

glassmorphism 디자인 스타일을 가진 간단한 CAPTCHA 구성 요소입니다. 전자 상거래 웹 사이트에 이상적이며 젖빛 유리와 같은 반투명 효과, 다크 모드 지원 및 그레이스케일 색 구성표를 특징으로 합니다.

열다

Brutalist CAPTCHA 구성 요소

브루탈리즘 스타일로 디자인된 CAPTCHA 구성 요소로, 높은 대비, 특이한 레이아웃, 어두운 테마를 지원하는 반응형 효과를 특징으로 합니다.

열다

레트로/빈티지 CAPTCHA 구성 요소

소셜 미디어 인터페이스를 위해 설계된 레트로 스타일의 CAPTCHA 구성 요소로, 생생한 색상과 반응형 디자인 및 어두운 테마 지원이 있는 복잡한 레이아웃을 특징으로 합니다.

열다