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>

관련 구성 요소

RetroCaptcha컴포넌트

포레스트 그린 색상 팔레트가 있는 간단한 복고풍 테마의 CAPTCHA 구성 요소로, 비영리/자선 웹사이트를 위해 설계되었습니다. 반응성 및 다크 모드 지원이 특징입니다.

열다

CAPTCHA 구성 요소

반응형 CAPTCHA 구성 요소에는 마이크로 인터랙션, 어두운 테마 지원 및 임의의 자리 표시자 이미지가 있습니다.

열다

Neumorphism CAPTCHA 구성 요소

전자 상거래 사이트를 위해 뉴모픽 스타일로 설계된 반응형의 복잡한 CAPTCHA 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다