<body class="bg-gradient-to-r from-purple-500 to-indigo-500 flex justify-center items-center h-screen">
<div class="mx-auto bg-white p-8 rounded-lg shadow-lg max-w-sm w-full">
<h2 class="text-3xl font-bold text-indigo-600 mb-6">Sign Up</h2>
<form action="#" method="POST">
<div class="mb-4">
<label for="username" class="block text-gray-700 font-medium mb-2">Username</label>
<input type="text" id="username" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300" placeholder="Enter your username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 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-indigo-300" placeholder="Enter your email">
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 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-indigo-300" placeholder="Enter your password">
</div>
<button class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-500 transition duration-300">Create Account</button>
</form>
</div>
</body>
デザインの特徴としては、目を引くグラデーションとカードスタイルで、若々しさとエネルギーを感じさせるレイアウトになっています。背景が鮮やかなので、フォーム部分が浮き出て見えるように設計されています。
特徴: ・グラデーション背景: 鮮やかなカラーグラデーションを使用し、ページ全体に活気を与えています。 ・ カードデザイン: フォームがカード内に収まっており、中央に配置されています。 ・視覚的な階層: ユーザーの目をフォームに引き付けるための色使い。
コメント
コメントはまだありません...