<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>
デザインの特徴としては、目を引くグラデーションとカードスタイルで、若々しさとエネルギーを感じさせるレイアウトになっています。背景が鮮やかなので、フォーム部分が浮き出て見えるように設計されています。
特徴: ・グラデーション背景: 鮮やかなカラーグラデーションを使用し、ページ全体に活気を与えています。 ・ カードデザイン: フォームがカード内に収まっており、中央に配置されています。 ・視覚的な階層: ユーザーの目をフォームに引き付けるための色使い。
コメントはまだありません...