Floating Label Glow Input

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

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

.glow-field {
  position: relative;
  width: 280px;
  margin: 10px 0;
}
.glow-field__input {
  width: 100%;
  padding: 12px 10px 8px 10px;
  font-size: 16px;
  color: #f1f5f9;
  background: transparent;
  border: none;
  border-bottom: 2px solid #334155;
  outline: none;
  transition: border-color 0.3s ease;
}
.glow-field__label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
  transition: 0.25s ease all;
}
.glow-field__bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  transition: width 0.3s ease, left 0.3s ease;
}
.glow-field__input:focus ~ .glow-field__bar,
.glow-field__input:not(:placeholder-shown) ~ .glow-field__bar {
  width: 100%;
  left: 0;
}
.glow-field__input:focus ~ .glow-field__label,
.glow-field__input:not(:placeholder-shown) ~ .glow-field__label {
  top: -12px;
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}