JSFiddle - React, Tailwind, and code Playground

by ryan Couch

HTML

<div id="DIV_2">
	<div id="DIV_3">
		<div id="DIV_4">
			<div id="DIV_5">
				 <a href="https://wrapbootstrap.com/" id="A_6"><img src="//d85wutc1n854v.cloudfront.net/live/imgs/logo-v2-legacy.png" width="180" height="28" alt="WrapBootstrap" id="IMG_7" /></a>
				<h1 id="H1_8">
					<a href="https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0" id="A_9">SmartAdmin - Responsive WebApp</a>
				</h1>
				<div id="DIV_10">
					<a href="http://192.241.236.31/themes/preview/smartadmin/1.9.x/ajax/index.html#ajax/dashboard.html" title="Remove this frame" id="A_11">Remove this frame »</a>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script id="SCRIPT_13">$(document).ready(function(){
                function fix_height(){
                    var h = $("#tray").height();    
                    $("#preview").attr("height", (($(window).height()) - h) + "px");
                }
                $(window).resize(function(){ fix_height(); }).resize();
                //$("#preview").contentWindow.focus();
            });
</script>

CSS

#BODY_1 {
    color: rgb(64, 64, 64);
    height: 716px;
    text-decoration: none solid rgb(64, 64, 64);
    text-size-adjust: 100%;
    width: 1536px;
    column-rule-color: rgb(64, 64, 64);
    perspective-origin: 768px 380.5px;
    transform-origin: 768px 380.5px;
    caret-color: rgb(64, 64, 64);
    background: rgb(250, 250, 250) url("http://d85wutc1n854v.cloudfront.net/live/imgs/content_inner_bg.png") repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(64, 64, 64);
    font: normal normal 400 normal 13px / 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    outline: rgb(64, 64, 64) none 0px;
    overflow: hidden;
    padding: 45px 0px 0px;
}/*#BODY_1*/

#DIV_2 {
    color: rgb(64, 64, 64);
    height: 716px;
    text-decoration: none solid rgb(64, 64, 64);
    text-size-adjust: 100%;
    width: 1536px;
    column-rule-color: rgb(64, 64, 64);
    perspective-origin: 768px 358px;
    transform-origin: 768px 358px;
    caret-color: rgb(64, 64, 64);
    border: 0px none rgb(64, 64, 64);
    font: normal normal 400 normal 13px / 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#DIV_2*/

#DIV_3 {
    bottom: 712.4px;
    color: rgb(64, 64, 64);
    height: 46px;
    left: 0px;
    position: fixed;
    right: 0px;
    text-decoration: none solid rgb(64, 64, 64);
    text-size-adjust: 100%;
    top: 0px;
    width: 1536px;
    z-index: 10000;
    column-rule-color: rgb(64, 64, 64);
    perspective-origin: 768px 23px;
    transform-origin: 768px 23px;
    caret-color: rgb(64, 64, 64);
    border: 0px none rgb(64, 64, 64);
    font: normal normal 400 normal 13px / 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#DIV_3*/

#DIV_4 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset;
    color: rgb(64, 64, 64);
    height: 46px;
    text-decoration: none solid rgb(64, 64, 64);
   ...