Floating Border Focus Auth Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="f-lbl-card" onsubmit="return false;"><h3>Sign In</h3><div class="f-lbl-group"><input type="email" required placeholder=" "><label>Email Address</label></div><div class="f-lbl-group"><input type="password" required placeholder=" "><label>Password</label></div><div class="f-row"><label><input type="checkbox"> Remember</label><a href="#">Forgot?</a></div><button type="submit">Sign In to Dashboard</button></form>

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

.f-lbl-card { width: 210px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.f-lbl-card h3 { margin: 0 0 16px; font-size: 14px; font-weight: 800; color: #0f172a; text-align: center; }
.f-lbl-group { position: relative; margin-bottom: 12px; }
.f-lbl-group input { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; font-size: 8px; color: #0f172a; outline: none; background: transparent; box-sizing: border-box; }
.f-lbl-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 3px; }
.f-lbl-group input:focus ~ label, .f-lbl-group input:not(:placeholder-shown) ~ label { top: -5px; font-size: 6px; font-weight: 800; color: #2563eb; }
.f-lbl-group input:focus { border-color: #2563eb; }
.f-row { display: flex; justify-content: space-between; font-size: 7px; color: #64748b; margin-bottom: 12px; }
.f-row a { color: #2563eb; text-decoration: none; font-weight: 700; }
.f-lbl-card button { width: 100%; background: #0f172a; color: #fff; border: none; border-radius: 8px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; }