JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginbox">
  <div class="logindata" id="logindata1">
    <input type="text" class="change-background form-control" placeholder="Username">
  </div>

  <div class="logindata" id="logindata2">
    <input type="password" class="change-background form-control" placeholder="Password">
  </div>
  
  <div class="logindata" id="logindata3">
    <input type="text" class="change-background form-control" value="browser auto fill test" placeholder="Password">
  </div>
</div>

CSS

#loginbox {
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}

.logindata {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  height: 60px;
  width: 290px;
  transition: 0.25s ease;
}

.form-control {
  margin-left: auto;
  margin-right: auto;
  height: 55px;
  width: 288px;
  border-style: none;
  background-color: transparent;
  text-align: center;
  border: solid 2px #00FF7F;
  transition: 0.25s ease;
  font-size: 25px;
  font-family: "Trebuchet MS";
}

.form-control:hover {
  box-shadow: 0px 0px 30px #2E8B57;
}

::-webkit-input-placeholder {
  color: #00FF7F;
}

.filled-background {
  background-color: #00FF7F;
}

JavaScript

$(document).ready(function() {
  $('.change-background').on('change', function() {
    var $this = $(this);
    var value = $.trim($this.val());

    // toggleClass can be provided a bool value,
    // If we provide true we add class, if false we remove class
    $this.toggleClass('filled-background', value.length !== 0);
  }).change();
  // We also want to call a 'change' event on this just incase the page has
  // pre-filled in values
});