JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overflow">
<div id="pagewraps">
<style>
p {display:inline-block;}
</style>


<a href="http://netsolutionstechnologies.com"><p style="font-family:tahoma; font-size:23px; margin-right:200px; text-decoration:underline; color:#FCFCFC;">NETSOLUTIONS TECHNOLOGIES</p></a>
<a href=domains><p style="font-family:CorbelRegular; font-size:16px;">Domains</p></a>
<a href=websites><p style="font-family:CorbelRegular; font-size:16px;">Websites</p></a>
<a href=hosting><p style="font-family:CorbelRegular; font-size:16px;">Hosting</p></a>
<p style="font-family:CorbelRegular; font-size:15px;"></p>
                                              </div>
<div id="page-wrap">
  
<h3 style="font-family:corbelregular; font-size:30px; color:#4169E1;">Websites</h3>
<p style="font-size:23px;">Build dynamic websites.
</p> 
		
	
	</div>
  
  <div id="page-wrap1">
  
<h3 style="font-family:CorbelRegular;color:#4169E1;">Domains</h3>
<p id="address">We help you choose the right domain for your brand.
</p> 
  	
	
	</div>
  
   <div id="page-wrap2">
  
<h3 style="font-family:CorbelRegular;color:#4169E1;">Hosting</h3>
<p id="address">Provide web hosting.
</p> 

    
	
	</div>

<div id="pagewrapper" style="text-align:center;">
	<p style="display:inline;">Copyright</p>
<p style="display:inline;">2013 Netsolutions Technologies</p>

</div>
<div id="cf4a" class="shadow">
   <img alt="Image1" src="http://netsolutionstechnologies.com/wp-content/uploads/2013/09/bb015s1995.jpg" />
   <img alt="Image2" src="http://netsolutionstechnologies.com/wp-content/uploads/2013/09/bb015s1976.jpg" />
   <img alt="Image3" src="http://netsolutionstechnologies.com/wp-content/uploads/2013/09/med_9ed9956588dfbc6e58935002ff87cf55.jpg" />
   <img alt="Image4" src="http://netsolutionstechnologies.com/wp-content/uploads/2013/08/toyotachriseinar.jpg" />
</div>


</div>

CSS

#page-wrap{position:relative;}
#page-wrap {text-align:center; overflow:hidden; font-size:14px; background:#000000; opacity:0.5; border-top: 5px solid black; color:#FFFFFF; font-weight:bold; display:inline-block; z-index: 4; position: absolute; top: 130px; right:35%; width: 500px; min-height:100px; margin: 30px auto; padding: 30px 0 3px 16px;-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;}
		p { margin: 0 0 30px 23px; text-indent: 0px; }
#page-wrap h3{font-size:23px; text-align:center;}
#page-wrap h3 a {color:#4169E1;}


#page-wrap1{position:relative;}
#page-wrap1 {text-align:center; overflow:hidden; font-size:23px; background:#000000; opacity:0.5; border-top: 5px solid black; color:#FFFFFF; font-weight:bold; display:inline-block; z-index: 3; position: absolute; top: 130px; right:35%; width: 500px; min-height:100px; margin: 30px auto; padding: 30px 0 3px 16px;-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;}
  	p { margin: 0 0 30px 23px; text-indent: 0px; }
#page-wrap1 h3{text-align:center;}
#page-wrap1 h3 a {color:#4169E1;}

#page-wrap2{position:relative;}
#page-wrap2 {text-align:center; overflow:hidden; font-size:23px; background:#000000; opacity:0.5; border-top: 5px solid black; color:#FFFFFF; font-weight:bold; display:inline-block; z-index: 2; position: absolute; top: 130px; right:35%; width: 500px; min-height:100px; margin: 30px auto; padding: 30px 0 3px 16px;-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;}
    p { margin: 0 0 30px 23px; text-indent: 0px; }
#page-wrap2 h3{text-align:center;}
#page-wrap2 h3 a {color:#4169E1;}

@-webkit-keyframes cf4FadeInOut {
       0% {opacity:1;}
       19% {opacity:1;}
       25% {opacity:0;}
       94% {opacity:0;}
       100% {opacity:1;}
    }

    @-moz-keyframes cf4FadeInOut {
       0% {opacity:1;}
       19% {opacity:1;}
       25% {opacity:0;}
       94% {opacity:0;}
    ...