<body class="bg-gray-100 flex justify-center items-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg max-w-sm w-full mx-auto">
<h2 class="text-2xl font-semibold text-gray-700 mb-6">Create Account</h2>
<form action="#" method="POST">
<div class="mb-4">
<label for="name" class="block text-gray-600 font-medium mb-2">Name</label>
<input type="text" id="name" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300" placeholder="Enter your name">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-600 font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300" placeholder="Enter your email">
</div>
<div class="mb-4">
<label for="password" class="block text-gray-600 font-medium mb-2">Password</label>
<input type="password" id="password" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300" placeholder="Enter your password">
</div>
<button class="w-full bg-gray-800 text-white py-3 rounded-lg hover:bg-gray-700 transition duration-300">Sign Up</button>
</form>
</div>
</body>
このデザインは、余白を活かしたシンプルなレイアウトで、ユーザーが入力に集中できるように作成しました。 モダンでクリーンな印象を与えるために、色合いはモノクロームをベースにしています。
また、フォームフィールドが選択されたときに、微妙なシャドウとボーダーが出現し、 ラベルがフォームフィールドの上に配置されており、読みやすくなるように工夫しました。
コメント
コメントはまだありません...