Brutalist CAPTCHAコンポーネント
ブルータリズムスタイルでデザインされたCAPTCHAコンポーネントで、ハイコントラスト、珍しいレイアウト、ダークテーマをサポートするレスポンシブエフェクトが特徴です。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
<h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
<span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
</div>
<div class="flex flex-col items-center mb-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
</div>
<div class="flex space-x-4">
<button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
<button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
</div>
</div>
</div>関連コンポーネント
CAPTCHAコンポーネント
ポートフォリオWebサイトのセキュリティを強化するためのマテリアルデザインスタイルのCAPTCHAコンポーネントで、ダークテーマとTailwind CSSを使用したレスポンシブデザインが特徴です。
Cyberpunk_Weather_CAPTCHA_Component
サイバーパンクをテーマにした複雑な天気/気候データ用の CAPTCHA コンポーネントで、近未来的なネオン オーシャン/ブルーの色調、暗い背景、複数のインタラクティブ要素が特徴です。ダークモードのサポートにより完全にレスポンシブ。