CCHub Logo CCHub Tailwind Collection
コンポーネント キャプチャ Bauhaus CAPTCHAコンポーネント

Bauhaus CAPTCHAコンポーネント

ドキュメント/Wikiサイト向けのバウハウススタイルのシンプルで機能的なCAPTCHAコンポーネントで、幾何学的な形状、高コントラスト、完全な応答性、およびダークモードのサポートを特徴としています。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg border-2 border-black dark:border-white relative overflow-hidden">
    
    <!-- Bauhaus geometric elements -->
    <div class="absolute top-0 left-0 w-16 h-16 bg-red-500 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-blue-500 transform translate-x-1/2 translate-y-1/2 -rotate-30"></div>
    <div class="absolute top-1/2 left-1/2 w-12 h-12 bg-yellow-500 z-0 transform -translate-x-1/2 -translate-y-1/2 rotate-12"></div>

    <div class="relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold mb-4 text-center dark:text-white uppercase tracking-wider">
        Are you Human?
      </h2>
      
      <p class="mb-6 text-sm text-center text-gray-700 dark:text-gray-300">
        Please click the square containing a &quot;Circle&quot;.
      </p>

      <div class="grid grid-cols-3 gap-2 mb-6">
        <!-- Example CAPTCHA grid items -->
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white transform rotate-45 group-hover:rotate-0 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 dark:ring-blue-400 group-hover:scale-110 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-2 md:w-10 md:h-2 bg-red-500 ring-2 ring-red-500 dark:ring-red-400 group-hover:w-full transition-all duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-6 h-6 md:w-8 md:h-8 border-4 border-yellow-500 dark:border-yellow-400 rounded-lg group-hover:rotate-180 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-black dark:bg-white clip-path-polygon-[50%_0%,_0%_100%,_100%_100%] group-hover:scale-105 transition-transform duration-200"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 border-4 border-red-500 dark:border-red-400 rounded-full group-hover:animate-spin-slow"></div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 relative">
            <div class="absolute inset-0 bg-yellow-500 dark:bg-yellow-400 group-hover:rotate-45 transition-transform duration-200"></div>
            <div class="absolute inset-0 bg-blue-500 dark:bg-blue-400 group-hover:-rotate-45 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-4 border-black dark:border-white relative">
            <div class="absolute w-2 h-2 rounded-full bg-black dark:bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:scale-150 transition-transform duration-200"></div>
          </div>
        </button>
        <button class="captcha-item group p-4 border-2 border-black dark:border-white aspect-square flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500">
          <div class="w-8 h-8 md:w-10 md:h-10 bg-yellow-500 dark:bg-yellow-400 group-hover:scale-105 transition-transform duration-200"></div>
        </button>
      </div>

      <div class="flex justify-between items-center">
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-transparent text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Refresh
        </button>
        <button class="py-2 px-4 border-2 border-black dark:border-white bg-blue-500 text-white dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 text-sm md:text-base font-bold uppercase">
          Verify
        </button>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

CAPTCHAコンポーネント

食品/レストランのWebサイト向けのシンプルでクリーンなモノスペースをテーマにしたCAPTCHAコンポーネントで、グレースケールの配色とダークモードのサポートによる完全な応答性が特徴です。

開ける

CAPTCHAコンポーネント

ソーシャルメディアインターフェイス用に設計されたスキューモーフィックCAPTCHAコンポーネントで、トライアドカラースキームを採用し、複数のインタラクティブ要素とダークテーマのサポートを備えています。

開ける

CAPTCHAコンポーネント

マテリアルデザインの原則とTailwind CSSを使用してスタイル設定されたCAPTCHAコンポーネントで、eコマースWebサイトに最適で、ダークテーマのサポートとレスポンシブデザインを備えています。

開ける