<div class="radikalwp-wave-field"><input type="text" placeholder="نام و نام خانوادگی"><span class="radikalwp-wave-bar"><//span><span class="radikalwp-wave-bar radikalwp-wave-bar-2"><//span><//div>

.radikalwp-wave-field { position: relative; width: 300px; }
.radikalwp-wave-field input {
  width: 100%;
  padding: 12px 4px;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  background: transparent;
  border: none;
  border-bottom: 2px solid #e2e8f0;
  outline: none;
  box-sizing: border-box;
}
.radikalwp-wave-field input::placeholder { color: #94a3b8; }
.radikalwp-wave-bar {
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  transform: translateX(50%);
  transition: width .4s ease;
}
.radikalwp-wave-bar-2 {
  opacity: .45;
  transition-delay: .08s;
}
.radikalwp-wave-field:focus-within .radikalwp-wave-bar { width: 100%; }