2要素認証コンポーネント
glassmorphismスタイルで設計されたシンプルな2要素認証コンポーネントで、eコマースプラットフォームに適しています。単色の配色が特徴で、ダークモードに対応しており、応答性に優れています。
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Two-Factor Authentication</title>
</head>
<body class="bg-gray-800 dark:bg-gray-900 flex items-center justify-center h-screen">
<div class="bg-gradient-to-r from-gray-700 to-gray-600 backdrop-blur-lg bg-opacity-50 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-semibold mb-4 text-center">Two-Factor Authentication</h2>
<p class="text-gray-300 text-sm text-center mb-6">Verify your identity by entering the code sent to your phone.</p>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/80/80" alt="User Avatar" class="rounded-full border border-white dark:border-gray-600">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-300 dark:text-gray-400" for="code">Enter Code:</label>
<input type="text" id="code" class="mt-1 block w-full bg-transparent border border-gray-600 dark:border-gray-700 rounded-md p-2 text-white focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Code" required>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 rounded-md p-2 text-white font-semibold transition duration-200">Verify</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-500 hover:text-blue-400">Resend Code</a>
</div>
</div>
</body>
</html>関連コンポーネント
2要素認証コンポーネント
ダークテーマをサポートするTailwind CSSを使用したレスポンシブな2要素認証コンポーネント。ミニマリスト/フラットなデザイン、単色の配色、電子商取引に適した複数のインタラクティブ要素を備えた複雑なレイアウトが特徴です。