JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="container">
    <div class="fullHeader">
        <div class="headerContent">Main Column</div>
    </div>
    <div class="halfHeaderLeft">
                <div class="headerContent">
                    Left Column
                </div>
            </div>
    <div class="halfHeaderRight">
                <div class="headerContent">
                    Right Column
                </div>
            </div>
    <div class="shadow"></div>
    <div class="sections">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

CSS

body {
    background-color:#000;
}
.fullHeader {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:44px;
    background: -webkit-linear-gradient(top, #f4f5f7 0%, #a7abb7 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 17px;
    font-family: Helvetica;
    font-weight: bold;
    letter-spacing: .2px;
    color:#71787F;
    text-shadow: 0 1px 0 #E3E5E9;
    word-break: break-all;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090;
}
.container {
    background-color:#000;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.sections {
    position:absolute;
    top:44px;
    bottom:0;
    right:0;
    left:0;
}
.top {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:50%;
    background-color:#fff;
    border-bottom:1px solid #000;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.bottom {
    position:absolute;
    left:0;
    right:0;
    top:50%;
    bottom:0;
    background-color:#fff;
    border-top:1px solid #000;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.headerContent {
    position:absolute;
    left:0;
    right:0;
    top:0;
    text-align:center;
    margin-top:11px;
}
.shadow {
    height:44px;
    position:absolute;
    left:0;
    right:0;
    box-shadow:0 1px 2px rgba(0, 0, 0, .2);
    z-index:600;
}
.halfHeaderRight, .halfHeaderLeft{
    display:none;
}
@media screen and (min-width: 321px) and (orientation:landscape) {
    .top {
        left:0;
        right:50%;
        bottom:0;
        top:0;
        border-bottom-left-radius:0;
        border-right:1px solid #000;
        border-bottom:0;
    }
    .bottom {
        right:0;
        left:50%;
        bottom:0;
        top:0;
        border-top-left-radius:0;
        border-top-right-radius:0;
        border-bottom-left-radius:5px;
        border-left:1px solid #000;
        border-top:0;
    }
    .fullHeader {
        display:none;
   ...