Brutalist CAPTCHA 구성 요소
브루탈리즘 스타일로 디자인된 CAPTCHA 구성 요소로, 높은 대비, 특이한 레이아웃, 어두운 테마를 지원하는 반응형 효과를 특징으로 합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
<h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
<span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
</div>
<div class="flex flex-col items-center mb-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
</div>
<div class="flex space-x-4">
<button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
<button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
</div>
</div>
</div>