JSFiddle - React, Tailwind, and code Playground

by Newman4088

HTML

<label>First Name</label><br />
<input type="text" name="lastname" class="input-feild" />
<br />
<label>Last Name</label>
<br />
<input type="text" name="firstname" class="input-feild" />
<br />
<label>Age</label>
<br />
<input type="text" name="dateofbirth" class="<input-feild>

<button id="click-me" class="click-me">Click Me!</button>
<div class="simple-node" id="simple-node">
</div>

CSS

.click-me {
  border:1px solid #FF9933;
  background-color:#000000;
  color:#fff;
  border-radius:2px;
  padding:7px;
}

.username {
  border:2px solid #93AEC9;
  border-radius:5px;
  padding:10px;
}

JavaScript

/*
Copyright (C) 2015  J Mascorella

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

$('#click-me').click( function () {
    var firstname = $("input[name='firstname']");
    var lastname = $("input[name='lastname']");
    var age = $("input[name='age']");
    
    $('#simple-node').html(
     "Hey, " + firstname.val() + "Nice to meet you! Your a young fella at" + age.val() + ". <br />" + "Your full name is " + firstname .val() + " " + lastname.val() + ",");
});