CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 Minimalist Captcha 구성 요소

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

관련 구성 요소

RetroCaptcha컴포넌트

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

열다

CAPTCHA 구성 요소

소셜 미디어 플랫폼에 적합한 트라이어딕 색 구성표가 있는 Glassmorphism 스타일의 CAPTCHA 구성 요소입니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징이며, 중간 정도의 복잡성과 일부 상호 작용 기능이 있습니다. 디자인은 반응형이며 다크 모드 지원을 포함합니다.

열다

CAPTCHA 구성 요소 - 유기농/자연에서 영감을 받은 (가을색)

뉴스/저널리즘 웹사이트에 적합한 가을 색상을 사용하여 자연에서 영감을 받은 유기적 스타일로 설계된 복잡하고 반응이 빠른 CAPTCHA 구성 요소입니다. 완전한 다크 모드 지원이 포함됩니다.

열다