Demo of floating label that overlaps the border of the input field when it is focused or filled out.
Tailwind CSS code:
<div class="absolute mt-3">
<input type="text" id="email" class="form-input px-4 py-3 absolute top-0 left-0 border border-black focus:border-red-400 rounded outline-none" placeholder=" ">
<label for="email" class="form-label absolute left-2 top-3 px-2 text-slate-400 cursor-text transition-all bg-white">email</label>
</div>
With additional css:
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown).form-input:not(:focus) ~ .form-label {
top: -0.5rem;
font-size: 0.8rem;
}