CAPTCHAコンポーネント

ダークモードとレスポンシブデザインのCAPTCHAコンポーネント。

プレビュー

HTMLコード

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-white mb-4">CAPTCHA Challenge</h2>
    <div class="flex items-center justify-center mb-4">
      <img src="https://picsum.photos/150/60" alt="CAPTCHA Image" class="mr-4 rounded-md">
      <input type="text" class="border border-gray-700 bg-gray-900 text-white rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Verify</button>
  </div>
</div>

関連コンポーネント

ミニマリストキャプチャコンポーネント

ダッシュボード用に設計されたシンプルでレスポンシブなミニマリストのCAPTCHAコンポーネントで、単色の配色を使用し、ダークモードをサポートします。

開ける

Glassmorphism CAPTCHAコンポーネント

glassmorphism デザインスタイルのシンプルな CAPTCHA コンポーネント。曇りガラスのような半透明の効果、ダークモードのサポート、グレースケールの配色を特徴とするeコマースWebサイトに最適です。

開ける

スキューモーフィックCAPTCHAコンポーネント

イベント/カンファレンスWebサイト用に設計されたスキューモーフィックCAPTCHAコンポーネントで、トライアドカラースキームとダークモードのサポートを特長としています。インタラクティブなボタンを備えた現実世界のデジタル要素を模倣しています。

開ける