JSFiddle - React, Tailwind, and code Playground

by Rowan Hamilton

HTML

<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/GameBoyIO.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/GameBoyCore.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/XAudioJS.swf"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/XAudioServer.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/XAudioServerMediaStreamWorker.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/base64.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/gui.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/json2.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/mobile.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/resampler.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/resize.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/resizeWorker.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/swfobject.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/terminal.js"></script>
<script src="https://rawgit.com/taisel/GameBoy-Online/master/js/other/windowStack.js"></script>
<body>
<div id="GameBoy" class="window">
            <div class="menubar">
                <span id="GameBoy_file_menu">File</span>
                <span id="GameBoy_settings_menu">Settings</span>
                <span id="GameBoy_view_menu">View</span>
                <span id="GameBoy_about_menu">About</span>
            </div>
            <div id="gfx">
                <canvas id="mainCanvas"/>
                <span id="title">GameBoy</span>
                <span id="port_title">Online</span>
            </div>
        </div>
        <div id="terminal" class="window">
           ...

CSS

@charset "utf-8";
html {
	background-color: rgb(200, 225, 225);
	background-attachment: fixed;
	background-repeat: none;
	background-image: url("../images/gradient_01.svg");
	background-image: -webkit-linear-gradient(315deg, rgb(200, 200, 255), rgb(200, 255, 200));
	background-image: -moz-linear-gradient(315deg, rgb(200, 200, 255), rgb(200, 255, 200));
	background-image: -o-linear-gradient(315deg, rgb(200, 200, 255), rgb(200, 255, 200));
	background-image: linear-gradient(135deg, rgb(200, 200, 255), rgb(200, 255, 200));
	margin: 0;
	padding: 0;
	font-family: arial;
	margin: 0;
	padding: 0;
	overflow: auto;
	text-align: left;
	direction: ltr;
	width: 100%;
	height: 100%;
	text-rendering: optimizeSpeed;
}
body {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	border: none;
	margin: 0;
	padding: 0;
}
div.menubar, div#GameBoy > div#gfx, div.window > div.button_rack, ul.menu {
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}
div.window {
	visibility: visible;
	display: none;
	position: absolute;
	overflow: hidden;
	margin: 0;
	padding: 10px 0px 0px 0px;
	top: 0;
	left: 0;
	color: rgb(0, 0, 0);
	font-size: 16px;
	-webkit-border-radius: 10px 10px 3px 3px;
	border-radius: 10px 10px 3px 3px;
	-webkit-box-shadow: 5px 5px 10px rgb(30, 30, 30);
	box-shadow: 5px 5px 10px rgb(30, 30, 30);
	background-color: rgb(200, 200, 200);
	z-index: 2;
	opacity: 1;
}
div#GameBoy {
	min-height: 340px;
	min-width: 400px;
}
div#input_select, div#save_importer {
	min-height: 100px;
	min-width: 200px;
}
div#instructions {
	min-height: 300px;
	min-width: 400px;
}
div.menubar {
	max-height: 28px;
	min-width: 250px;	/*Fail safe for poopy browsers.*/
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: rgb(150, 150,...

JavaScript

var DEBUG_MESSAGES = false;
    var DEBUG_WINDOWING = false;
    window.onload = function () {
        windowingInitialize();
    }