JSFiddle - React, Tailwind, and code Playground

by rburns3

HTML

<label> First Name ?</label>
<input type="text" name="FirstName" class="input-element" />
<br>
<br/>
<label> Last Name ?</label>
<input type="text" name="LastName" class="input-element" />
<br>
<br/>
<Label>Age ?</Label>

<input type="text" name="Age" class="input-element" />


<br>
<br/>
<button class="click-me">Press!</button>
<div class="simple-node" id="simple-node">
</div>

CSS

.click-me {
  border: 1px solid #93AEC9;
  background-color: #99ff66;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.input-element {
  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]");
  console.log(username.val());
  $('.simple-node').html(username.val());
});