Minimalist Captcha 구성 요소
대시보드용으로 설계된 단순하고 반응이 빠르며 미니멀한 CAPTCHA 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm rounded-lg shadow-md bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6">
Are you human?
</h2>
<div class="flex flex-col items-center gap-4 mb-6">
<div class="w-full h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
<img src="https://picsum.photos/250/80?random=1" alt="Captcha image" class="w-full h-full object-cover rounded-sm border border-gray-300 dark:border-gray-600">
</div>
<button type="button" class="flex items-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md py-1 px-2">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 11m7 11v-5h.582m-15.356-2A8.001 8.001 0 0120 13l-2.199-1.857L20 13c-.161 4.545-3.535 8-7.794 8A7.962 7.962 0 014 12.01
관련 구성 요소
CAPTCHA 구성 요소 - Candy Material Design
사탕 테마의 머티리얼 디자인 미학이 있는 간단하고 반응이 빠른 CAPTCHA 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
CAPTCHA 구성 요소
포트폴리오 웹사이트의 보안을 강화하기 위해 머티리얼 디자인 스타일의 CAPTCHA 구성 요소를 사용했으며, Tailwind CSS를 사용한 어두운 테마와 반응형 디자인을 특징으로 합니다.