CCHub Logo CCHub Tailwind Collection
구성 요소 캡차 Skeuomorphic CAPTCHA 구성 요소

Skeuomorphic CAPTCHA 구성 요소

적당히 복잡한 스큐어모픽 CAPTCHA 구성 요소는 기업용 블루 톤으로 설계되었으며 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징이며 실제 디지털 요소를 모방합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t border-l border-blue-50 dark:border-gray-600 p-6 sm:p-8 relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-200/50 before:to-blue-400/50 dark:before:from-gray-800/50 dark:before:to-gray-950/50 before:rounded-2xl before:blur-xl before:opacity-30 before:-z-10
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] after:from-blue-100/30 after:via-blue-50/10 after:to-transparent dark:after:from-gray-600/30 dark:after:via-gray-700/10 dark:after:to-transparent after:rounded-2xl after:-z-10">

    <div class="flex items-center space-x-3 mb-6">
      <svg class="h-8 w-8 text-blue-700 dark:text-blue-400 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.92c-.225.86.147 1.767.93 2.22a12.035 12.035 0 0010.51 3.251c.905-.182 1.706-.577 2.404-1.127a12.003 12.003 0 003.53-3.66c.383-.75.393-1.637.087-2.399A12.008 12.008 0 0021.08 6.92a12.01 12.01 0 00-.73-2.936z" />
      </svg>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-900 dark:text-gray-100 text-shadow-sm">Verify You're Human</h2>
    </div>

    <p class="text-blue-800 dark:text-gray-200 mb-6 leading-relaxed">
      To proceed with your booking, please complete the CAPTCHA challenge below.
    </p>

    <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-xl shadow-inner border border-blue-200 dark:border-gray-700 mb-6">
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2 text-blue-700 dark:text-blue-300 font-semibold mb-3 border-b border-blue-200/50 dark:border-gray-600/50 pb-2 flex items-center">
           <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2zM9 22V12h6v10" />
            </svg>
          Select all squares containing a <span class="text-blue-900 dark:text-white font-bold ml-1">house</span>.
        </div>

        <div class="captcha-grid grid grid-cols-3 gap-2">
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/10/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/433/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/292/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/400/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/296/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1025/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/29/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1074/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/196/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex items-center justify-center w-full sm:w-auto px-6 py-3 bg-blue-700 text-white rounded-xl shadow-md hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out
        relative overflow-hidden group
        after:absolute after:top-0 after:left-0 after:w-0 after:h-full after:bg-white/20 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full">
        <svg class="h-5 w-5 mr-2 -ml-1 text-white group-hover:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span class="relative z-10">Refresh</span>
      </button>
      <button type="submit" class="flex items-center justify-center w-full sm:w-auto px-8 py-3 bg-gradient-to-br from-blue-600 to-blue-800 text-white font-bold rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 dark:from-blue-500 dark:to-blue-700 dark:hover:from-blue-600 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out
        relative overflow-hidden group
        before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-white/20 before:transition-all before:duration-300 before:ease-in-out group-hover:before:w-full">
        <span class="relative z-10">Verify</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-white group-hover:text-blue-50 z-10" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <p class="text-xs text-blue-600 dark:text-gray-400 mt-6 text-center">
      Your privacy matters. This helps us ensure a secure experience for all users.
    </p>

  </div>
</div>

관련 구성 요소

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

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

열다

RetroCaptcha컴포넌트

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

열다

CAPTCHA 구성 요소

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

열다