JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<!-- container -->

	<div class="row">
		<div class="col-sm-4">
			<lable>html</lable>
			<textarea class="form-control" id="html-body" rows="4"></textarea>
		</div>
		<div class="col-sm-4">
			<lable>css</lable>
			<textarea class="form-control" id="css-body" rows="4"></textarea>
		</div>
		<div class="col-sm-4">
			<lable>js</lable>
			<textarea class="form-control" id="ja-body" rows="4"></textarea>
		</div>
	</div> <!-- /END row -->

	<div class="row">
		<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-body" id="preview"></div>
		</div>
		</div>
	</div> <!-- /END row -->

</div> <!-- /END container -->

CSS

#preview {
  height: 300px;
  overflow: scroll;
}

JavaScript

$(document).ready(function() {
    XX();
    // this calculates the sum for some text nodes
    $('textarea').keyup(XX); // keyup
    
    function XX() {
        $('#preview').html("<style>\n " + sessionStorage["css-body"] + "</style>\n <body>\n " + sessionStorage["html-body"] + "\n </body>\n");
    } // function
    });
    
$('textarea').keydown(function(){
      sessionStorage[$(this).attr("id")] = $(this).val();
      });
  $("#html-body").html(sessionStorage["html-body"]);
  $("#css-body").html(sessionStorage["css-body"]);
  $("#js-body").html(sessionStorage["js-body"]);
  function init() {
    if (sessionStorage["html-body"]) {
        $("#html-body").val(sessionStorage["html-body"]);
      }
    if (sessionStorage["html-body"]) {
        $("#css-body").val(sessionStorage["css-body"]);
      }
    if (sessionStorage["html-body"]) {
        $("#js-body").val(sessionStorage["js-body"]);
      }
  };
  
$('pre#source').text(html);
$('#it').val(html);