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

CAPTCHAコンポーネント

ダッシュボード用に設計された3DスタイルのCAPTCHAコンポーネントで、鮮やかな色とレスポンシブデザイン、ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
    <div class="w-full max-w-xs">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">  
            <img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
            <p class="ml-4">Check all images with a car</p>
        </div>
        <div class="grid grid-cols-3 gap-2 my-4">  
            <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
        </div>
        <button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
    </div>
</div>

関連コンポーネント

CAPTCHAコンポーネント

ソーシャルメディアインターフェース用に設計された、キャンディー/スウィートカラースキームを備えた、コードにインスパイアされた複雑なCAPTCHAコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブな要素を備えています。

開ける

Brutalist CAPTCHAコンポーネント

ブルータリズムスタイルでデザインされたCAPTCHAコンポーネントで、ハイコントラスト、珍しいレイアウト、ダークテーマをサポートするレスポンシブエフェクトが特徴です。

開ける

RetroCaptchaコンポーネント

フォレストグリーンのカラーパレットを備えたシンプルでレトロなテーマのCAPTCHAコンポーネントで、非営利団体/慈善団体のWebサイト向けに設計されています。応答性とダークモードのサポートを備えています。

開ける