JSFiddle - React, Tailwind, and code Playground

by João Felipe

HTML

<link rel="stylesheet" href="https://google-drive-sdk-samples.googlecode.com/hg-history/310f6cf3ef436445c2bfd7abc75cca6ca011c828/dotnet/DrEdit/Content/bootstrap.min.css">
<h1>Check Word</h1>
<hr/>
<textarea name="message">
  <data>
        <value>Exmple</value>
    </data>
    <data>
        <value>Boxx</value>
    </data>
    <data>
        <value>Softvare</value>
    </data>
     <data>
        <value>Adres</value>
    </data>
</textarea>
<br/>
<button>process</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Cantora+One);
textarea {
    width:300px;
    min-height:150px;
}
h1 {
    margin:10px 0 0 0;
  font-family: "Cantora One";
  font-size: 5em;
  font-weight: 400;
  text-align: center;
  color: #3498db;
  text-shadow: 2px 1px #2980b9, 3px 2px #2980b9, 4px 3px #2980b9, 5px 4px #2980b9, 6px 5px #2980b9, 7px 6px #2980b9; 
  transition: width 2s, height 2s, color 5s, text-shadow 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s, color 2s, text-shadow 2s;
}

JavaScript

$('button').click(function () {
    var code = $('textarea[name=message]').val();

    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }

    

    $('#output').val(code);
});