JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="IE=8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Expires" content="0" /><link href="/css/page.css" rel="stylesheet" type="text/css" /><link href="/css/page_content.css" rel="stylesheet" type="text/css" /><link href="/css/page_footer.css" rel="stylesheet" type="text/css" /><link href="/css/page_header.css" rel="stylesheet" type="text/css" /><link href="/css/page_sidebar.css" rel="stylesheet" type="text/css" /><link href="/css/page_wrapper.css" rel="stylesheet" type="text/css" />

            

    <script src="/js/jquery-1.7.1.min.js"></script>

      

    

<title>

    Home Page

</title></head>

<body>

    <form method="post" action="default.aspx" id="ctl01">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkJe7gZEdB1hMIdncO+QTqDPs0EGLeqOGw8H2qkg2tyUw=" />

</div>



        <header class="page_header">

           HEADER

           



        </header>

        <section class="page_wrapper">

            <aside class="page_left">

               <figure>

                    <img src="img/logo.png" width="160" height="65" alt=""/>

                   <p>Lorem ipsum:

                    <br/>dolor sit amet

                    </p>

                </figure>

                <nav>

                    <ul>

                        <li><a href="/">Meny Item 1</a></li>

                        <li><a href="/">Meny Item 2</a></li>

                        <li><a href="/">Meny Item 3</a></li>

                        <li><a href="/">Meny Item 4</a></li>

                        <li><a href="/">Meny Item 5</a></li>

                        <li><a href="/">Meny Item 6</a></li>

                        <li><a href="/">Meny Item 7</a></li>

                        <li><a href="/">Meny Item 8</a></li>

                 ...

CSS

body {
    margin: 0;
    padding: 0;
    background: #444;
    background: #FFF;
    font-family: Arial, Helvetica, sans-serif;
}
img {
    border: 0;
}
article, aside, section, footer, header, hgroup, nav, figure {
    display: block;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 28px;
}
h2 {
    font-size: 25px;
}
h3 {
    font-size: 22px;
}
h4 {
    font-size: 19px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 13px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 10px 0;
}

/* page_header
-------------------------------------------------------------- */

.page_header {
    height: 120px;
    background: #3f3f3f;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNmM2YzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #3f3f3f 0%, #222222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(100%,#222222));
    background: -webkit-linear-gradient(top,  #3f3f3f 0%,#222222 100%);
    background: -o-linear-gradient(top,  #3f3f3f 0%,#222222 100%);
    background: -ms-linear-gradient(top,  #3f3f3f 0%,#222222 100%);
    background: linear-gradient(top,  #3f3f3f 0%,#222222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#222222',GradientType=0 );
    border-bottom: 1px solid #282828;
    position: relative;
}

.page_header:before {
    content: "...