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: " + name + "\n";
    }
    
    if(!document.getElementById("city").disabled){
    output += "City: " + 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();});
}