JSFiddle - React, Tailwind, and code Playground

by m v

HTML

<div id ="top_pic">
 <hgroup> </hgroup>
<h1> top_pic;  SOME TEXT WILL GO HERE</h1> 
    <!-- A logo image will also be placed on top of background image in this div probably     in the hgroup  -->

</div>

<div id = "middle_pose">  
<h1 class = "midposetext"> MIDDLE pose div, some text goes hereAAA</h1>
</div>
<div id = "content"> 
<h1> Content div...some text goes here</h1>
</div>

<div class = "footer"> 
<h1> Footer div</h1>

</div>

CSS

body {
background-color : #e8e821;
width: 85%;
height: 100%;
margin: 0 auto;
border: dotted black; 
position: relative;
padding: 1%;

}

#top_pic { 


background-image: url('images/eyeforheader1.jpg');
background-size: cover;
background-repeat: no-repeat;
border: solid #3fa85f; 
margin: 0 0 20% 0;
 width: 100%; 
 height: 100%;
display: block;




}

#middle_pose {
/*background-image: url('images/girl on back grasping sheets brunette.png');*/
background-image: url('images/Screen Shot 2014-02-10 at 11.47.48 PM.png');
background-size: 100%; 
background-repeat: no-repeat;
background-color: #7547dd;
width: 100%;
height: 450px;
border: solid #f05858; 
margin: auto;


}

#content { 
background-image: url('images/Screen Shot 2014-05-28 at 5.52.03 PM.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 500px;
border: solid orange;
}

 .midposetext { color: #de4b8f;
} 

#middle_pose h1{
color: yellow;
z-index: 10;
font-size; 1.4em;
}