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

CAPTCHAコンポーネント

マテリアルデザインにインスパイアされたCAPTCHAコンポーネントは、ソーシャルメディアアプリケーション向けに設計された鮮やかな配色を備えています。ダークモードのサポートにより完全にレスポンシブ。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans tracking-wide">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl sm:p-5 p-4">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white capitalize">I'm not a robot</h2>
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-6">
      <img src="https://picsum.photos/id/237/100/100" alt="Image Grid 1" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/238/100/100" alt="Image Grid 2" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/239/100/100" alt="Image Grid 3" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/240/100/100" alt="Image Grid 4" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/241/100/100" alt="Image Grid 5" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/242/100/100" alt="Image Grid 6" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/243/100/100" alt="Image Grid 7" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/244/100/100" alt="Image Grid 8" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/245/100/100" alt="Image Grid 9" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
    </div>

    <p class="mb-6 text-gray-600 dark:text-gray-300 text-sm md:text-base">Please select all squares with <span class="font-semibold text-indigo-700 dark:text-indigo-400">vehicles</span>.</p>

    <div class="flex justify-end">
      <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Verify
      </button>
    </div>

    <div class="flex items-center justify-between text-xs mt-6 text-gray-500 dark:text-gray-400">
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Privacy</a>
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Terms</a>
    </div>
  </div>
</div>

関連コンポーネント

Monospace_Developer_CAPTCHA_Component

モノスペースフォント、端末の美学、補色スキームを備えた、コードにインスパイアされた複雑なCAPTCHAコンポーネントで、ポートフォリオが作品を紹介するように設計されています。ダークモードのサポートにより完全にレスポンシブ。

開ける

Retro_Captcha_Component

オーシャン/ブルーの色調のレトロ/ビンテージスタイルのCAPTCHAコンポーネントで、コンサルティング/サービスWebサイト向けに設計されています。歪んだ画像、オーディオチャレンジ、および入力フィールドを備えた複雑なインターフェイスを備えています。

開ける

CAPTCHAコンポーネント - オーガニック/自然にインスパイアされた(秋の色)

秋の色を使用した有機的で自然にインスパイアされたスタイルでデザインされた、複雑でレスポンシブなCAPTCHAコンポーネントで、ニュース/ジャーナリズムのWebサイトに適しています。完全なダークモードのサポートが含まれています。

開ける