JSFiddle - React, Tailwind, and code Playground
HTML
<div id="maincontainer">
<div id="topsection">
<div class="outer">
<div class="float-wrap">
<div class="left-floater">
<img src="http://intranet/images/CrystalLogo-HorizColor.jpg" width="250px" />
</div>
<div class="left-floater">
<h3>Our Mission Statement</h3>
<h4>Provide high quality products and services, quickly and flexibly, with unparalleled customer support</h4>
</div>
<div class="left-floater"> <h3>Our Vision Statement</h3>
<h4>Working Together we will be the Most Trusted Provider of Computer Architecture for Operational, Deployable, and High-Reliability Applications</h4>
</div>
</div>
</div>
</div>
</div>
<div class="contouter">
<div class="flocontat-wrap">
<div class="lefcontt-floater">
<img src="http://intranet/images/CrystalLogo-HorizColor.jpg" width="250px" />
</div>
<div class="contmid-floater">
<h3>Our Mission Statement</h3>
<h4>Provide high quality products and services, quickly and flexibly, with unparalleled customer support</h4>
</div>
<div class="contright-floater"> <h3>Our Vision Statement</h3>
<h4>Working Together we will be the Most Trusted Provider of Computer Architecture for Operational, Deployable, and High-Reliability Applications</h4>
</div>
</div>
</div>
CSS
/**-------------Page containers. (Frameish)---------------------------*/
#header {
position : fixed;
width : 100%;
height : 10%;
top : 0;
right : 0;
bottom : auto;
left : 0;
}
#leftnavigation {
position : fixed;
height : auto;
top : 10%;
left : 0;
width : 225px;
margin : 0px 0px 0px 5px;
color : #000000;
padding : 3px;
overflow: visible;
z-index: 999;
}
#content {
position : fixed;
top : 10%;
bottom : 100px;
margin : 0px 0px 0px 230px;
width : 500px;
height : auto;
padding-left : 5px;
padding-right : 12px;
color : #000000;
overflow : visible;
z-index: 900;
}
#rightcol {
position : fixed;
top : 10%;
bottom : 100px;
margin : 0px 0px 0px 900px;
height : auto;
padding-left : 5px;
color : #000000;
overflow : hidden;
z-index: 900;
}
/*----Boxes Raised box-------*/
.drop-shadow {
position:relative;
width:90%;
padding:1em;
margin:2em auto 5em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:95%;
height:20%;
}
.drop-shadow:after{
right:10px;
left:auto;
}
.raised:before {
width:auto;
right:10px;
left:10px;
bottom:0;
-webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
...