<body class="bg-gray-900 flex justify-center items-center h-screen">
<div class="mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-lg shadow-lg max-w-sm w-full">
<h2 class="text-3xl font-semibold text-gray-100 mb-6">Register</h2>
<form action="#" method="POST">
<div class="mb-4">
<label for="full-name" class="block text-gray-300 font-medium mb-2">Full Name</label>
<input type="text" id="full-name" class="w-full p-3 bg-gray-800 text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your full name">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-300 font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full p-3 bg-gray-800 text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your email">
</div>
<div class="mb-4">
<label for="password" class="block text-gray-300 font-medium mb-2">Password</label>
<input type="password" id="password" class="w-full p-3 bg-gray-800 text-white border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your password">
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-500 transition duration-300">Sign Up</button>
</form>
</div>
</body>
このデザインは、モダンなダークテーマにフロストガラス風の背景効果を取り入れた、夜間モードに適したレイアウトです。シックな印象を与えつつ、ガラスのような効果で高級感を演出しています。
特徴:
・ダークテーマ: 背景とフォームを暗い色で統一し、リラックスした印象に。 ・フロストガラスエフェクト: 背景に透過性のあるガラスのようなエフェクトを適用。 ・ライトなアクセントカラー: テキストやボタンにライトブルーを使用し、視認性を向上。
コメント
コメントはまだありません...