JSFiddle - React, Tailwind, and code Playground

by mandarin6b0

HTML

<body>
    <div id="container">
        <div id="topbar">
            <div class="fixedwidth"></div>
        </div>
        <div id="front"></div>
        <div id="line">
            <div class="fixedwidth">
                <div class="foowrapper">
                    <div id="foto"></div>
                    <div id="design"></div>
                    <div id="gaming"></div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div id="content">
            <div class="fixedwidth">
                <div id="fotocontent"></div>
                <div id="designcontent"></div>
                <div id="gamingcontent"></div>
            </div>
        </div>
        <div class="clear"></div>
        <div id="footer">
            <div class="fixedwidth"></div>
        </div>
    </div>
</body>

CSS

body {
     padding:0;
     margin:0;
     font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
     background-color:#D8DCE1;
 }
 .clear {
     clear:both;
 }
 .fixedwidth {
     width:960px;
     margin:0 auto;
     padding:0 0;
 }
 #topbar {
     background-color:#4C7585;
     height: 40px;
     width: 100%;
 }
 #front {
     height: 360px;
     width: 100%;
     background-color:#D8DCE1;
 }
 #line {
     height:10px;
     width:100%;
     background-color:#4C4C4C;
 }
 #foto {
     height:120px;
     width:120px;
     background-color:#4C4C4C;
     border-radius:60px;
     z-index:3;
     float:left;
     position:relative;
     top:-55px;
     margin-left:103px;
 }
 #gaming {
     height:120px;
     width:120px;
     background-color:#4C4C4C;
     border-radius:60px;
     z-index:3;
     float:right;
     position:relative;
     top:-55px;
     margin-right:103px;
 }
 #design {
     height:120px;
     width:120px;
     background-color:#4C4C4C;
     border-radius:60px;
     z-index:3;
     float:left;
     position:relative;
     top:-55px;
     margin-left:198px;
 }
 #content {
     margin:0;
     padding:0;
 }
 #fotocontent {
     background-color:#A48251;
     height:500px;
     width:320px;
     float:left;
 }
 #designcontent {
     background-color:#D1A366;
     height:500px;
     width:320px;
     float:left;
 }
 #gamingcontent {
     background-color:#A48251;
     height:500px;
     width:320px;
     float:left;
 }
 #footer {
     background-color:#4C7585;
     height: 40px;
     width: 100%;
 }
 #container {
     margin:0;
     padding:0;
 }
 .foowrapper {
     position: absolute;
     width: 100%;
 }
 .fixedwidth {
     position: relative;
 }