JSFiddle - React, Tailwind, and code Playground

HTML

<form id="registeration_form">
  <div class="field">
    <input placeholder="Enter Name" aria-label="enter name" type="text" class="input" id="name" name="name">
    <span role="presentation" class="underline"></span>
  </div>

  <div class="field">
    <input placeholder="Enter Username" aria-label="enter username" type="text" class="input" id="username" name="username">
    <span role="presentation" class="underline"></span>
  </div>

  <div class="field">
    <input placeholder="Enter Email" aria-label="enter email" type="text" class="input" id="email" name="email">
    <span role="presentation" class="underline"></span>
  </div>
</form>

CSS

.field .underline {
  width: 0;
  overflow: hidden;
  transition: 100ms;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: black;
}

#registeration_form input:focus + .underline {
 width: 100%; 
}

.field {
  display: inline-block;
  position: relative;
  margin-bottom: .5rem;
}

.field input {
  border: 1px solid #eee;
  padding: .5rem 1rem;
}