JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<textarea id="my-text" class="input text-input" rows="4" cols="4"></textarea>
<input type="button" class="button-input input" id="finish-button" value="Done" />
<div class="self-line">

<h2>
Output
</h2>
<div class="output">

</div>
</div>

CSS

body {
  font-family: Verdana, Arial, sans-serif;
}

.input {
  border-radius: 5px;
  border: solid 1px #454589;
  float: left;
  clear: left;
  margin: 4px 0px;
}

.text-input {
  min-width: 300px;
  width: 20%;
}

.button-input {
  display: flex;
  cursor: pointer;
}

.button-input:hover {
  background-color: rgba(0, 0, 0, .3);
}

.self-line {
  float: left;
  clear: both;
}

.self-line h2 {
  border-bottom: solid 1px #ababab;
  padding-bottom: 4px;
}

JavaScript

$(function() {
	$(document).on("click", '#finish-button', function(e) {
  	let $output = $(".output");
    let $input = $("#my-text");
    
    var payload = {
    	Text: $input.val()
    };
    
    $output.text(JSON.stringify(payload));
  });
});