CCHub Logo CCHub Tailwind Collection
コンポーネント キャプチャ ミニマリストCAPTCHA

ミニマリストCAPTCHA

ダークモードをサポートするレスポンシブCAPTCHAコンポーネントで、パステルカラーのミニマルなデザインが特徴です。シンプルなチェックボックスとテキストのプレースホルダーが含まれています。

プレビュー

HTMLコード 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

関連コンポーネント

CAPTCHAコンポーネント

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

開ける

CAPTCHAコンポーネント

マイクロインタラクション、ダークテーマのサポート、ランダムなプレースホルダー画像を備えたレスポンシブCAPTCHAコンポーネント。

開ける

CAPTCHAコンポーネント

Glassmorphism スタイルの CAPTCHA コンポーネントで、トライアドのカラースキームで、ソーシャル メディア プラットフォームに適しています。ぼかし効果のあるすりガラスのような半透明の要素を備え、中程度の複雑さといくつかのインタラクティブ機能を備えています。デザインはレスポンシブで、ダークモードのサポートが含まれています。

開ける