JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="source">
  <script>var i = 1;</script>
  <style>.test {color: red;}</style>
  <span class="test1">test1</span>
  <style>.test2 {color: green;}</style>
  <script>var i2 = 2;</script>
  <span class="test2">test2</span>
  <style>.test3 {color: blue;}</style>
  <span class="test3">test3</span>
  <script>alert(i+i2);</script>
</textarea>
<button id="btn">ok</button>

CSS

form#test {display: none;}

JavaScript

$('#btn').click(function(){
	var source = $('<div>').html($('#source').text());
  
  var js = '';
  $('script',source).each(function(){
  	js += $(this).text()+"\r\n";
  }).remove();
  
  var css = '';
  $('style',source).each(function(){
  	css += $(this).text()+"\r\n";
  }).remove();
  var html = source.html();
  
  

  var form = $('<form method="post" id="test">');
  form.attr('action','//jsfiddle.net/api/post/library/pure/');
  $('<textarea>').attr('name','html').val(html).appendTo(form);
  $('<textarea>').attr('name','css').val(css).appendTo(form);
  $('<textarea>').attr('name','js').val(js).appendTo(form);
  form.appendTo(document.body);
  form.submit();
});