CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 레트로/빈티지 CAPTCHA 구성 요소

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

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-900 dark:to-indigo-800 rounded-lg shadow-lg max-w-md w-full">
    <h2 class="text-white text-2xl font-bold mb-4">Verify You're Human</h2>
    <img src="https://picsum.photos/400/200?random=1" alt="Nostalgic Background" class="rounded-lg mb-4" />
    <div class="flex flex-col items-center text-center mb-4">
        <p class="text-white mb-2">To continue, please solve the puzzle below:</p>
        <div class="flex flex-row space-x-2 bg-white p-2 rounded-lg shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-violet-500 dark:border-violet-300" />
            <p class="text-gray-800 font-semibold">Identify the vintage item:</p>
            <img src="https://picsum.photos/100/100?random=2" alt="Vintage Item" class="w-10 h-10 rounded-lg border-2 border-pink-500 dark:border-pink-300" />
        </div>
    </div>
    <input type="text" placeholder="Your Answer" class="w-full p-2 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 rounded-lg mb-4" />
    <button class="bg-fuchsia-500 hover:bg-fuchsia-600 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-800 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out">Submit</button>
</div>

관련 구성 요소

Monospace_Developer_CAPTCHA_Component

코드에서 영감을 받은 복잡한 CAPTCHA 구성 요소로, 고정 폭 글꼴, 터미널 미학 및 보색 구성표가 포함되어 있으며, 포트폴리오에서 작업을 선보일 수 있도록 설계되었습니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

CAPTCHA 구성 요소

음식/레스토랑 웹사이트를 위한 간단하고 깔끔한 모노스페이스 테마의 CAPTCHA 구성 요소로, 그레이스케일 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

Brutalist CAPTCHA 구성 요소

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

열다