Pure CSS Floating Label Input

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="float-input-535"><input type="text" id="email-535" placeholder=" " required><label for="email-535">Email Address</label></div>

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

.float-input-535 { position: relative; width: 220px; font-family: system-ui, sans-serif; margin: auto; }
.float-input-535 input { width: 100%; padding: 12px 14px; background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 10px; font-size: 12px; outline: none; transition: border-color 0.25s; box-sizing: border-box; color: #0f172a; }
.float-input-535 label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #94a3b8; pointer-events: none; transition: all 0.25s ease; background: #ffffff; padding: 0 4px; }
.float-input-535 input:focus, .float-input-535 input:not(:placeholder-shown) { border-color: #3b82f6; }
.float-input-535 input:focus + label, .float-input-535 input:not(:placeholder-shown) + label { top: 0; font-size: 10px; font-weight: 700; color: #3b82f6; }