JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="text" class="text" id="name" placeholder="Name">
  <br>
  <input type="text" class="text" id="city" placeholder="City">
  <br>
  <textarea type="textarea" id="words" placeholder="Words" cols="70" rows="6"></textarea>
  <br>
  <input type="button" value="Combine" onclick="convert()">
  <br>
  <div class="wrap"><span id="CharCountLabel1" class="counter"></span>
    <textarea type="textarea" name="output" id="output" cols="70" rows="10" maxlength='' placeholder="Output"></textarea>
  </div>
  <br>
  <button type="reset" onclick="ResetForm();" value="Reset form">Reset form</button>
</form>

CSS

body {
  margin: 15;
  background-color: #0082bb;
  font-color: darkblue;
  font-size: 10pt;
  font-family: arial;
}

p,
td,
th {
  font-size: 10pt;
  font-family: arial;
}

form {
  margin: 0px;
  padding: 0px;
}

.main {
  padding: 10px;
  margin-top: 30px;
  height: 1000px;
  /* Used in this example to enable scrolling */
}


/*Character counter */

.wrap {
  position: relative;
  display: inline-block;
}

.wrap span {
  position: absolute;
  top: 9px;
  right: 4px;
}

.counter {
  background-color: #006f9f;
  color: #00aed9;
  font-family: arial;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 5px;
  line-height: 12px;
  height: 16px;
  width: 70px;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 4px;
}

textarea[type="textarea"] {
  width: ;
  padding: 5px 10px;
  margin: 5px 0;
  box-sizing: border-box;
  font-family: arial;
  font-weight: bold;
  /* to bold or no bold */
  color: #006f9f;
  /*text color*/
  border: 4px solid #006f9f;
  border-radius: 10px;
  overflow: auto;
}

textarea[type="textarea"]:focus {
  border: 4px solid #00aed9;
  outline: none;
}

textarea[type="textarea"]:enabled {
  background-color: #FFFFFF;
}

textarea[type="textarea"]:disabled {
  background-color: lightgrey;
}

textarea[type="textarea"]:valid {
  background-color: #E4E9F3;
}

input[type="text"] {
  width: ;
  padding: 0px 10px;
  margin: 5px 0;
  box-sizing: border-box;
  font-family: arial;
  font-weight: bold;
  /* to bold or no bold */
  color: #006f9f;
  /*text color*/
  border: 4px solid #006f9f;
  border-radius: 10px;
  overflow: auto;
}

input[type="text"]:focus {
  border: 4px solid #00aed9;
  outline: none;
}

input[type="text"]:enabled {
  background-color: #FFFFFF;
}

input[type="text"]:disabled {
  background-color: lightgrey;
}

input[type="text"]:valid {
  background-color: #E4E9F3;
}

JavaScript

function wordwrap(str, width, brk, cut) {
  brk = brk || '\n';
  width = width || 60;
  cut = cut || false;

  if (!str)
    return str;

  var regex = '.{1,' + width + '}(\\s|$)' + (cut ? '|.{' + width + '}|.+$' :
    '|\\S+?(\\s|$)');
  return str.match(RegExp(regex, 'g')).join(brk);
}

function convert() {

  var name = document.getElementById("name").value;
  var city = document.getElementById("city").value;
  var words = document.getElementById("words").value;
  //input = wordwrap(input, 70, true);
  var output = "";

  if (!document.getElementById("name").disabled) {
    output += "Name: " + toTitleCase(name) + "\n";
  }

  if (!document.getElementById("city").disabled) {
    output += "City: " + toTitleCase(city) + "\n";
  }

  if (!document.getElementById("words").disabled) {
    output += "The words are... " + words + "\n";
  }

  document.getElementById("output").value = output;
}



CharacterCount = function(output, FieldToCount) {
  var myField = document.getElementById(output);
  var myLabel = document.getElementById(FieldToCount);

  var Chars = myField.length;
  if (!Chars) {
    Chars = "";
  };

  var remainingChars = Chars + myField.value.length
  myLabel.innerHTML = remainingChars + "" + Chars
}

setInterval(function() {
  CharacterCount('output', 'CharCountLabel1')
}, 55);



toTitleCase = function(str) {
  var name = document.getElementById('name');
  var city = document.getElementById('city');
  return str.replace(/\w\S*/g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });
}