Below is a responsive registration page created using HTML and CSS, designed with an attractive and modern layout. The design features a centered registration form with a clean, professional look, including a gradient background, subtle animations, and responsiveness for various screen sizes (desktops, tablets, and mobiles). The form includes fields for username and password, a submit button, and a “Forgot Password?” link, styled with hover effects and a mobile-friendly layout
The registration page includes the following features:
- Username field to enter a unique username.
- Email field to input a valid email address.
- Phone Number field to provide a contact number.
- Address field to enter the user’s address.
- Gender dropdown menu to select the user’s gender.
- Date of Birth field with a mm/dd/yyyy format for input.
- Password field to set a password.
- Confirm Password field to re-enter the password for verification.
- Register button to submit the registration form.
- Link to login for users who already have an account.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: linear-gradient(to right, #e0eafc, #cfdef3);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}
.form-container {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 700px;
}
.input-icon {
position: relative;
}
.input-icon svg {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #60a5fa;
}
.input-icon input, .input-icon select {
padding-left: 2.5rem;
width: 100%;
}
</style>
</head>
<body>
<div class="form-container">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-6">Register</h2>
<div class="space-y-4">
<!-- Username -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<input type="text" placeholder="Enter your username" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Email -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12h4m-4 0l-4-4m4 4l-4 4m-8-8h8m-8 4h8m-8 4h8M4 6h16M4 18h16" />
</svg>
<input type="email" placeholder="Enter your email" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Phone Number -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h2a2 2 0 012 2v10a2 2 0 01-2 2H3m18-9v2m-2 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
</svg>
<input type="tel" placeholder="Enter your phone number" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Address -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M12 9v.01" />
</svg>
<input type="text" placeholder="Enter your address" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Gender -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6 6m-6-6l-6 6" />
</svg>
<select class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
<option>Select your gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<!-- Date of Birth -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<input type="text" placeholder="mm/dd/yyyy" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Password -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-1.104 0-2 .896-2 2v3h4v-3c0-1.104-.896-2-2-2z" />
</svg>
<input type="password" placeholder="Enter your password" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Confirm Password -->
<div class="input-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 2c-1.104 0-2 .896-2 2v3h4v-3c0-1.104-.896-2-2-2z" />
</svg>
<input type="password" placeholder="Confirm your password" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
</div>
<!-- Register Button -->
<button class="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition duration-300">REGISTER</button>
<!-- Login Link -->
<p class="text-center text-sm text-gray-600 mt-4">
Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a>
</p>
</div>
</div>
</body>
</html>