galaxy/Inputs/SanthoshSJ-Dev_mean-wolverine-8.html

<div class="input-wrapper">
  <input class="input-box" type="text" placeholder="Enter your text">
  <span class="underline"></span>
</div>

<style>
/* From Uiverse.io by SanthoshSJ-Dev - Tags: simple, material design, input, animated, line, text */
.input-wrapper {
  position: relative;
  width: 200px;
  margin: 50px auto;
}

.input-box {
  font-size: 16px;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid #ccc;
  color: #08AEEA;
  width: 100%;
  background-color: transparent;
  transition: border-color 0.3s ease-in-out;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #08AEEA;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.input-box:focus {
  border-color: #08AEEA;
  outline: none;
}

.input-box:focus + .underline {
  transform: scaleX(1);
}

</style>