Clean Floating Label Login Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="floatlogin-form" onsubmit="return false;"><h3>Sign In</h3><div class="float-group"><input type="email" required placeholder=" "><label>Email Address</label></div><div class="float-group"><input type="password" required placeholder=" "><label>Password</label></div><button type="submit">Continue</button><div class="float-foot">New user? <a href="#">Create account</a></div></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.floatlogin-form { width: 200px; background: #ffffff; border-radius: 14px; padding: 18px; box-shadow: 0 15px 30px rgba(0,0,0,0.05); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.floatlogin-form h3 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #0f172a; text-align: center; }
.float-group { position: relative; margin-bottom: 12px; }
.float-group input { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 6px; padding: 8px; font-size: 8px; color: #0f172a; outline: none; background: transparent; box-sizing: border-box; }
.float-group label { position: absolute; left: 8px; top: 8px; font-size: 8px; color: #94a3b8; pointer-events: none; transition: 0.2s ease all; background: #fff; padding: 0 2px; }
.float-group input:focus ~ label, .float-group input:not(:placeholder-shown) ~ label { top: -5px; font-size: 6px; font-weight: 800; color: #2563eb; }
.float-group input:focus { border-color: #2563eb; }
.floatlogin-form button { width: 100%; background: #0f172a; color: #fff; border: none; border-radius: 6px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; }
.float-foot { font-size: 7px; color: #64748b; text-align: center; margin-top: 10px; }
.float-foot a { color: #2563eb; text-decoration: none; font-weight: 700; }