JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap980px clear">
    <div id="intro-left"></div>
    <div id="intro-right"><h1>Novitates autem si spem</h1>
      <p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
        fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
        loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
        in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
        quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
        in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
        valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
        quibus diutius commorati sumus.</p>
      <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox
        interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius,
        modo non reclamante publico vigore, discessit.</p>
      <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox
        interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius,
        modo non reclamante publico vigore, discessit.</p>
     
    </div>  <!-- End DIV intro Right-->
   </div>  <!-- End DIV Wrap Clear-->
<div id="backpicture">backpicture</div>
<div id="middle-1">
<div class="two-columns"><div class="columns">
  <p>Lorem Elsass ipsum réchime amet non Choucroute knack hopla.</p>
	<p>Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?</p>
	<p>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.</p>
	<p>Allez tchao bissame, dû KNACSS !</p>
	<p>Lorem Elsass ipsum réchime amet non Choucroute knack hopla.</p>
	<p>Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?</p>
	<p>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir. Yeuh non che suis au réchime,...

CSS

@charset"UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}

Html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: 'Open Sans', sans-serif; 
}

/************/
/*! Header  */
/************/


#header {
	width: 100%;
	height: 180px;
}

#logo {
	float: left;
	padding-top: 35px;
	padding-left: 20px;
	width: 200px;
	color: #000;
	font-size: 20px;
}

#social {
	position: absolute; /* wrapped into maimenu DIV */
	font-size: 20px;
	float:right;
	right: 10px;
	Color: blue;

}


/**********/
/*! Menu  */
/**********/



#mainmenu {
	float:right;
	margin-top: 35px;
	padding-bottom: 10px; 
	overflow: hidden;
}
#mainmenu ul {
	float: right;
	margin: 0;
	color: #000;
	list-style: none;
}
#mainmenu ul li {
	display: inline-block;
	float: left;
	width: 140px;
	line-height: 20px;
}
#mainmenu>ul>li {
	margin-left: 20px;
}
#mainmenu ul li a {
	display: block;
	text-decoration: none;
	font-weight:600;
	font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
	color: #333;
	-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-webkit-transition-duration: .4s, .4s, .4s, .4s;
	-moz-transition-duration: .4s, .4s, .4s, .4s;
	-ms-transition-duration: .4s, .4s, .4s, .4s;
	-o-transition-duration: .4s, .4s, .4s, .4s;
	transition-duration: .4s, .4s, .4s, .4s;
	-webkit-transition-property: all, -webkit-transform;
	-moz-transition-property: all, -moz-transform;
	-ms-transition-property: all, -ms-transform;
	-o-transition-property: all, -o-transform;
	transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
	color: #005EBC;
	-webkit-transition-timing-function: ease-out, ease-in, linear,...