JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>RibbonLayout test</title>
    </head>
    <body>
    <div id="main">
        <div id="head">
            <div class="outer">
                <div class="inner">
                This is the heading
                </div>
                <div class="filler">&nbsp;</div>
            </div>
        </div> 
        <div id="body">This is the body</div>
        <div id="footer">
            <div class="outer">
                <div class="filler">&nbsp;</div>
                <div class="inner">
                    This is the footer
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

CSS

html, body {
    min-width: 500px;
    height: 100%;
    margin: 0;
    padding: 0;
    font-color: #444A4C;
    font-family: Arial;
}

#head .inner, #footer .inner {
    min-height: 80px;
}
#body {
    overflow: hidden;
    background-color: #eee;
    position: relative;
    height: 100%;
    min-height: 260px;
}
.outer {
    background-color: lime;
    position: relative;
    width: 100%;
}
.inner {
    width: 460px;
    margin: auto;
    background-color: green;
}
.filler {
    font-size: 0;
    height: 10px;
    position: relative;
    width: 100%;
}
.filler:before, .filler:after {
    content: "";
    position: absolute;
    
    left: -10px;
    border-width: 0 10px 10px 0;
    border-style: solid;
    border-color: transparent #6F6F6F;
}
.filler:after {
    left: auto;
    right: -10px;
    border-width: 0 0 10px 10px;
}
#footer .filler:before {
    border-width: 10px 10px 0 0;
}
#footer .filler:after {
    border-width: 10px 0 0 10px;
}

.filler, #body {
    width: 436px;
    margin: auto;
    background-color: pink;
}

#body, .filler {
  background-color: #CCE4ED;
    border-style: solid;
    border-width: 0 1px 0 1px;
    /* border-color: #E5F1F3; */
    border-color: transparent;
    z-index: 2010;
}

#head .inner, #footer .inner {
background: #c9cfd1; /* Old browsers */
background: -moz-linear-gradient(top,  #c9cfd1 0%, #eef3f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9cfd1), color-stop(100%,#eef3f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9cfd1 0%,#eef3f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9cfd1 0%,#eef3f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9cfd1 0%,#eef3f6 100%); /* IE10+ */
background: linear-gradient(top,  #c9cfd1 0%,#eef3f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cfd1', endColorstr='#eef3f6',GradientType=0 ); /* IE6-9 */
border-style: solid;
   ...