2要素認証コンポーネント
魅力的なマイクロインタラクションと補色スキームで設計された2要素認証コンポーネント。レスポンシブでダークモードをサポートしており、ポートフォリオ内の作品や製品を紹介するのに適しています。
HTMLコード
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email.</p>
<div class="flex justify-between items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">[email protected]</span>
</div>
<form>
<input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
<button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
</form>
<div class="mt-4 flex justify-between">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
</div>
</div>
</div>
</div>関連コンポーネント
2要素認証コンポーネント
ソーシャルメディアアプリケーション向けの複雑で応答性の高いレトロなテーマの2要素認証コンポーネントで、ダークモードとTailwind CSSを使用した類似の配色を備えています。複数のインタラクティブ要素が含まれており、picsum.photos と randomuser.me の画像を使用します。
2要素認証コンポーネント
鮮やかでシンプルなデザインの二要素認証コンポーネント。微妙なボタンアニメーションや入力フィールドの切り替えなどのマイクロインタラクションを備えています。ダークモードのサポートによるレスポンシブ。ポートフォリオ用に設計されています。