2要素認証コンポーネント
マイクロインタラクションとパステルカラーの配色でデザインされた二要素認証コンポーネントで、ポートフォリオ内の作品や製品を紹介するのに適しています。このコンポーネントには、複数のインタラクティブ要素と、ダークテーマをサポートするレスポンシブデザインが含まれています。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:w-1/3 w-full transition-all ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-center text-pink-600 dark:text-pink-400 mb-4">Two-Factor Authentication</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Please enter the verification code sent to your email.</p>
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="code">Verification Code</label>
<input type="text" id="code" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:border-pink-500 focus:ring focus:ring-pink-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter verification code" required />
</div>
<button type="submit" class="w-full bg-pink-600 text-white font-semibold rounded-md py-2 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition-all ease-in-out duration-300">Verify</button>
</form>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Resend Code</a>
<a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Need Help?</a>
</div>
</div>
<div class="mt-6 flex justify-center space-x-4">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/50" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600">
</div>
</div>