JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div id="wrap">
    <div id="page">
        <div id="titlebar">
            <div id="startBar"></div>
            <div id="sepTopBar"></div>
            <div id="banner">
                <ul>
                    <li class="ribbon"></li>
                </ul>
            </div>
            <div id="mainTitle">another
                <br/>web workshop</div>
            <div id="nav">
                <ul>
                    <li>home</li>
                    <li>projects</li>
                </ul>
            </div>
        </div>
        <div id="content">
            
            <div class="x50y100"><div class="inner"></div></div>
            <div class="x50y50"><div class="inner"></div></div>
            <div class="x25y50"><div class="inner"></div></div>
            <div class="x25y50"><div class="inner"></div></div>
        </div>
    </div>
</div>

CSS

* {

    padding:0;
    margin:0;
}
html, body {
    font-family:'Open Sans', sans-serif;
    height: 100%;
    width:100%;
}
#sepTopBar {
    width: 100%;
    height:1px;
    position:absolute;
    top: 120px;
    border-bottom: 1px solid #CCC;
}
#startBar {
    width: 100%;
    height:10px;
    position:absolute;
    top: 2px;
}
#wrap {
    height: 100%;
    width: 100%;
    background: #FEFEFE;
    position: relative;
}
#page {
    padding: 20px 60px;
    position: relative;
    height: 50%;
}
#banner {
    margin: -40px 0 0 0;
    padding: 0 10px 10px 10px;
    overflow: auto;
    height: 180px;
    z-index: 1;
    position: absolute;
    left: 0;
}
#titlebar {
    height: 130px;
    position: relative;
}
#mainTitle {
    position: absolute;
    left: 145px;
    top: 50px;
    text-shadow: -1px 0 2px #FFF;
    font-size: 36px;
    font-weight: bold;
    line-height: 35px;
}
#content {
    position: relative;
    height: 100%;
    padding: 60px 10px;
    background-color: #FFF;
}
#content div{
    float: left;
    display: block;
}
.inner{
    background-color: rgba(0,0,0,.5);
    position: relative;

    height: 100%;
    width: 100%;
    border:2px solid #FFF;
}

#banner ul {
    margin: 0 10px;
    padding: 0;
    float:right;
    z-index: 1;
    position: relative;
    background: url("../images/binding_dark.png");
}
#banner ul li {
    text-decoration: none;
    list-style-type: none;
    display: block;
    float: left;
    padding: 15px 5px 0 5px;
    width: 100px;
    position: relative;
    text-align:center;
    color: #FFF;
}
#nav {
    padding: 0 10px 10px 10px;
    overflow: auto;
    height: 30px;
    z-index: 1;
    position: absolute;
    right: 20px;
    bottom: 0;
}
#nav ul {
    margin: 0 10px;
    padding: 0;
    float:right;
    z-index: 1;
    position: relative;
}
#nav ul li {
    float: left;
    text-decoration: none;
    list-style-type: none;
    margin: 2px 35px;
}


.ribbon {
    background: #111;
    border-radius: 2px 2px 0 0;
  ...