<div class="floating-group">
<input type="text" id="username" class="floating-input" placeholder=" " required>
<label for="username" class="floating-label">Username</label>
</div>
<div class="floating-group">
<input type="password" id="userpass" class="floating-input" placeholder=" " required>
<label for="userpass" class="floating-label">Password</label>
</div>
.floating-group {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
margin-bottom: 20px;
width: 100%;
max-width: 300px;
}
.floating-input {
width: 100%;
padding: 12px 10px;
border: 1px solid #d1d5db;
border-radius: 8px;
outline: none;
font-size: 1rem;
transition: border-color 0.2s;
background: transparent;
color: #1f2937;
}
.floating-input:focus {
border-color: #3b82f6;
}
.floating-label {
position: absolute;
top: 12px;
left: 10px;
font-size: 1rem;
color: #9ca3af;
pointer-events: none;
transition: 0.2s ease all;
background: #fff;
padding: 0 4px;
}
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
top: -10px;
left: 8px;
font-size: 0.75rem;
color: #3b82f6;
font-weight: 600;
}