JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="css/site2.css"/>
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svg/trunk/html5.js"></script>
		<![endif]-->
		<!--[if lte IE 8]>
		<link rel="stylesheet" href="css/site2_ie.css"/>
		<![endif]-->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
		<title>Mook mookeen</title>
	</head>
	
	<body>
		<header>
			<h1>Mook<span id="decalage">mookeen</span></h1>
		</header>
		
		<nav>
			<ul>
				<li><a href="#">l'entreprise</a></li>
				<li><a href="#">nos activités</a></li>
				<li><a href="#">blog</a></li>
				<li><a href="#">tutoriaux</a></li>
				<li><a href="site2_contact.html">contact</a></li>
				<li><form method="post" action="traitement.php">
				<p><input type="text" name="recherche" placeholder="recherche"/>
				<input type="submit" value="Go"/></p>
				</form></li>
			</ul>
		</nav>
		
		<section>
			<section id="section1">
				<h1>L'entreprise</h1>
				
				<ul>
					<li><a href="#">A propos</a></li>
					<li><a href="#">Qui sommes-nous ?</a></li>
					<li><a href="#">Historique</a></li>
					<li><a href="#">Locaux</a></li>
					<li><a href="#">Carrières</a></li>
				</ul>
			
			
				<aside>
					<h2><img src="images/facebook.png" alt="" class="image"/><a href="#">Facebook</a></h2>
					<h2><img src="images/vimeo.png" alt="" class="image"/><a href="#">Viméo</a></h2>
					<h2><img src="images/twitter.png" alt="" class="image"/><a href="#">Twitter</a></h2>
					<h2><img src="images/rss.png" alt="" class="image"/><a href="#">RSS</a></h2>
				</aside>
			</section>
			
			<section id="section2">
				<h1>A propos</h1>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
				<p>Pellentesque...

CSS

@font-face {
    font-family: 'capture_itregular';
    src: url('../fonts/captureit_regular_macroman/Capture_it-webfont.eot');
    src: url('../fonts/captureit_regular_macroman/Capture_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/captureit_regular_macroman/Capture_it-webfont.woff') format('woff'),
         url('../fonts/captureit_regular_macroman/Capture_it-webfont.ttf') format('truetype'),
         url('../fonts/captureit_regular_macroman/Capture_it-webfont.svg#capture_itregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*body*/

body
{
	background: url('../images/bg_head.jpg') top center repeat-x, url('../images/bg_tile.jpg');
}

body
{
	margin: 0px;
	padding: 0px;
}

/*input*/

input
{
	margin: 0px;
	padding: 0px;
}

/*header*/

header h1
{
	width: 550px;
	font-family: 'capture_itregular';
	margin-left: 145px;
	margin-top: 80px;
	padding: 0px 25px 5px 10px;
	color: white;
	font-weight: normal;
	font-style: italic;
	font-size: 3.3em;
	text-shadow: 5px 3px 5px grey;
}

#decalage
{
	position: relative;
	top: 20px;
	left: 10px;
}

/*navigation*/

nav
{
	box-shadow: 0px 0px 10px grey;
	margin-top: 105px;
	background-color: #222222;
}

nav ul
{
	list-style-type: none;
	padding-left: 150px;
}

nav li
{
	display: inline-block;
	margin-right: 20px;
}

nav a
{
	font-size: 1em;
	color: white;
	text-transform: uppercase;
	padding: 18px 8px 19px 8px;
	text-decoration: none;
}

nav p
{
	position: relative;
	left: 160px;
}

nav a:hover
{
	background-color: rgba(0,0,0,0.8);
}

input[type="text"]
{
	border-radius: 5px;
	width: 200px;
	height: 20px;
}

input[placeholder="recherche"]
{
	font-weight: bold;
	padding-left: 8px;
}

input[type="submit"]
{
	background-color: #222222;
	color: white;
	box-shadow: 0px 0px 7px grey;
	border-radius: 5px;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: 3px;
}

/*corps*/
section
{
	background-color:...