JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form id="inputs_form" onsubmit="return inputs_form_html_submit_handler(event);">
  <div id="inputs_container">
    <div class="input-row">
      <label>input 1</label>
      <input id="input_1" type="text" maxlength=200 placeholder="Type Stuff Here..." oninput="checkInput(this);"/>
    </div>
    <div class="input-row">
      <label>input 2</label>
      <input id="input_2" type="text" maxlength=200 placeholder="Type Stuff Here..." oninput="checkInput(this);"/>
    </div>
    <div class="input-row">
      <label>input 3</label>
      <input id="input_3" type="text" maxlength=200 placeholder="Type Stuff Here..." oninput="checkInput(this);"/>
    </div>
  </div>
</form>
<div id="error_message"></div>

CSS

html, body{
  font-size: 12pt;
  font-weight: bold;
  height: 100%;
  margin: 0px 0px;
  width: 100%;
}
.number-of-inputs{
  color: #839098;
  padding: 0px 2em 0px 0px;
  position: absolute;
  right: 0px;
  top: 16pt;
}
#inputs_container{
  height: calc(100% - 1em);
  margin: 1em 0px 0px 0px;
}
.input-row{
  display: inline-block;
  margin: 0px 0px 1em 0px;
  width: 100%;
}
.input-row *{
  display: inline-block;
}
.input-row label{
  color: black;
  font-size: 14pt;
  padding: 0px 2em 1em 2em;
}
.input-row input{
  background: #EEEEEE;
  border: none;
  color: #85929A;
  font-size: 13pt;
  padding: 1em 2em;
  width: calc(100% - 4em);
}
::placeholder {
  color: #85929A;
}
.input-row input:focus{
  outline: none;
}

JavaScript

};
           
      var checkInput = function(input){
        var correct = true;
        if(!$(input).val()){
          $(input).addClass('ft_input_error');
          correct = false;
        }else{
          $(input).removeClass('ft_input_error');
        }
        return correct;
      }

      var inputs_form_html_submit_handler = function(event){
        var activeElement = $(document.activeElement);
        alert("submit");
        if(activeElement){
          activeElement.blur();
        }
        // if (event.keyCode == 13) {
        //     event.preventDefault();
        //     event.target.blur()
        // }
        return false;
      }

      $(document).ready(function(){});
       
      var emptyFunction = function(event){