JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  How does one border simply stay green?
</h1>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" placeholder="First name" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" placeholder="Last name" id="lname" name="lname">
</form>

CSS

h1 {
  font-size: 16px;
}

input {
  border: none;
  outline: none!important;
  padding: 10px 20px;
  width: 300px;
}

input[type=text] {
  color: #1a1a1a;
  border-bottom: 4px solid #1a1a1a;
  font-size: 24px;
  font-weight: 900;
}

input[type=text]:focus {
  border-bottom: 4px solid #178926;
}