JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<script src="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic"></script>
<body class="preload">
		<section id="header">
				<div id="logo-section">
					<a href="#">
						<svg id="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="50px" viewBox="0 0 432 111.132" enable-background="new 0 0 432 111.132" xml:space="preserve">
						<polygon fill="#D62A43" points="0,0 0.075,86.273 73.147,111.131 146.217,86.273 146.217,0 "/>
						<path fill="#FFFFFF" d="M73.029,83.559H50.692v-7.72h-0.234c-4.333,6.084-10.529,9.24-19.769,9.24
							c-10.873,0-20.819-6.662-20.819-20.581V22.861h23.152v31.804c0,7.026,0.829,11.938,7.613,11.938c3.974,0,9.234-1.986,9.234-11.695
							V22.861h23.16V83.559z"/>
						<path fill="#FFFFFF" d="M116.195,40.518c-0.114-1.984-1.166-3.502-2.697-4.565c-1.396-1.162-3.269-1.747-5.138-1.747
							c-3.273,0-7.021,0.701-7.021,4.674c0,1.755,1.412,2.571,2.693,3.156c3.859,1.644,12.635,2.104,20.357,4.68
							c7.716,2.458,14.5,7.021,14.5,16.961c0,16.843-16.149,21.402-30.881,21.402c-14.27,0-29.941-5.732-30.293-21.402h22.105
							c0.123,2.105,1.049,3.862,2.802,5.385c1.175,1.051,3.396,1.749,6.204,1.749c3.045,0,7.841-1.165,7.841-4.677
							s-1.995-4.56-12.755-6.431c-17.654-3.044-24.792-8.657-24.792-19.068c0-15.321,16.496-19.295,28.654-19.295
							c13.103,0,28.887,3.625,29.476,19.177H116.195z"/>
						<path fill="#FFFFFF" d="M154.447,0.045h23.157V29.52h0.234c3.511-5.146,9.711-8.182,16.609-8.182
							c20.353,0,25.847,17.308,25.847,31.577c0,15.209-8.299,32.162-25.49,32.162c-11.355,0-14.857-4.328-17.785-8.185h-0.237v6.667
							h-22.336V0.045z M186.964,38.182c-8.303,0-10.181,7.831-10.181,14.969c0,7.252,1.878,15.091,10.181,15.091
							s10.169-7.839,10.169-15.091C197.133,46.013,195.267,38.182,186.964,38.182"/>
						<path fill="#FFFFFF"...

CSS

html {
  background: #e5e5e5;
}

* {
  font-family: 'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#header {
    background-color: #0c2074;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    clear: both;
    float: none;
    /*height: 100px;*/
    overflow: auto;
}
#header h1,h2,h3,h4,p,a,small,blockquote {color:#0c2074;}

.content-area {
  background-color: #fff;
  width: 75%;
  margin: 40px auto;
  padding: 30px;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
  clear: both;
}

.content-area h1,h2,h3,h4,p {
  color: #0c2074;
}

/* Begin Text Sizing */

p {
  text-align: justify;  
  -moz-text-align-last: right; /* Code for Firefox */
  text-align-last: right;
}

body {
  margin: 0;
}

a {
  -webkit-transition: color 0.15s ease-in; /*safari and chrome */
  -o-transition: color 0.15s ease-in; /* opera */
}

/* Begin Images */

#logo {
  padding: 30px;
  height: 40px;
  float: left;
}

/* End Images */

/* Begin Welcome Area */

#logo-section {
  float: left;
  clear: both;
}

#welcome-center {
  float: right;
}

#astro {
  float: right;
  margin: 20px 20px 0 20px;
  width: 60px;
  height: 60px;
  border-radius: 1000px;
  background-color: #fff;
  display: inline-block;
}

#avatar {
  height: 50px;
  border-radius: 1000px;
  display: block;
  margin: auto;
  margin-top: 8px;
}

#welcome-text {
  color: #fff;
  text-align: right;
  font-size: 14pt;
  float: left;
  clear: both;
  padding-top: 40px;
}

.modal-container {
  position: fixed;
  background: #fff;
  left: 50%;
  transform: translate(-50%, -200%);
  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  padding: 20px;
  margin: 0;
  width: 70%;
  max-width: 600px;
  transition: transform 200ms linear;
  -webkit-transition: -webkit-transform 200ms linear;
}

.modal:before {
  content: "";
  position:...

JavaScript

$(document).on("click touchstart", function(e) {
    if (!$(e.target).closest(".modal-container").length) {
        window.location = "#";
    }
});