JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function target_popup(form) {
    window.open('', 'Codes.php', 'width=400,height=400,resizeable,scrollbars');
    form.target = 'Codes.php';
}
</script>
<html>
  <head>
<title>
</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="shortcut icon" href="favicon.ico" >
<link href="./css/edge-base.css,edge-style.css" rel="stylesheet" type="text/css" />
		<link href="css/Grid.css" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
		<style type="text/css">
		.button {
   border-top: 1px solid #2a79a3;
   background: #c7cccf;
   background: -webkit-gradient(linear, left top, left bottom, from(#373f47), to(#c7cccf));
   background: -webkit-linear-gradient(top, #373f47, #c7cccf);
   background: -moz-linear-gradient(top, #373f47, #c7cccf);
   background: -ms-linear-gradient(top, #373f47, #c7cccf);
   background: -o-linear-gradient(top, #373f47, #c7cccf);
   padding: 7.5px 15px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #1982bf;
   background: #1982bf;
   color: #ccc;
   }
.button:active {
   border-top-color: #ffffff;
   background: #ffffff;
   }
			HTML{margin:0px;padding:0px;min-height:100%;background-color:#5597cf;color:#eee;background-image:-webkit-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-moz-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-ms-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-o-linear-gradient(bottom, #80b4e1, #5597cf);background-image:linear-gradient(bottom, #80b4e1,...

CSS

.button {
   border-top: 1px solid #2a79a3;
   background: #c7cccf;
   background: -webkit-gradient(linear, left top, left bottom, from(#373f47), to(#c7cccf));
   background: -webkit-linear-gradient(top, #373f47, #c7cccf);
   background: -moz-linear-gradient(top, #373f47, #c7cccf);
   background: -ms-linear-gradient(top, #373f47, #c7cccf);
   background: -o-linear-gradient(top, #373f47, #c7cccf);
   padding: 7.5px 15px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #1982bf;
   background: #1982bf;
   color: #ccc;
   }
.button:active {
   border-top-color: #ffffff;
   background: #ffffff;
   }
			HTML{margin:0px;padding:0px;min-height:100%;background-color:#5597cf;color:#eee;background-image:-webkit-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-moz-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-ms-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-o-linear-gradient(bottom, #80b4e1, #5597cf);background-image:linear-gradient(bottom, #80b4e1, #5597cf);}
			BODY{margin:0px;padding:0px;font-family:"Droid Sans",sans-serif;-webkit-font-smoothing:antialiased;}
			::-webkit-scrollbar{width:12px;height:12px;}
			::-webkit-scrollbar-thumb{border:1px solid #B8B8B8;-webkit-border-radius:0px;border-radius:0px;background:#ccc;}
			::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:#eee;}
			A{color:#eee;text-decoration:none;cursor:pointer;}
			A:hover{text-decoration:underline;}
			#hdr{display:block;margin:40px 0px 0px 80px;padding:0px;line-height:1.2em;font-size:28px;color:#fff;text-shadow:0px 1px 1px rgba(51, 51, 51, 0.1);}
			#demoLinks{margin:0px 0px 0px...