JSFiddle - React, Tailwind, and code Playground

HTML

<header><p>EntĂŞte</p></header>
<div>
	<nav>
		<ul>
			<li><a href=""><span>Accueil</span></a></li><!--
		 --><li><a href=""><span>C.V</span></a></li><!--
		 --><li><a href=""><span>Portfolio</span></a></li><!--
		 --><li><a href=""><span>Contact</span></a></li>
		</ul>
	</nav>
	<section>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et consectetur arcu.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nec justo fermentum, fermentum justo ac, porttitor nisl. Quisque lacinia libero non pellentesque venenatis. Vivamus sagittis scelerisque turpis, sed laoreet mi faucibus eu. Morbi eget arcu vehicula, euismod ipsum et, blandit enim. Sed nibh nunc, tempor sit amet cursus non, imperdiet condimentum felis. Donec bibendum ullamcorper massa, in euismod ligula eleifend quis. Suspendisse dignissim quam ante, sit amet tincidunt massa mattis eget. Donec placerat ante libero, ut pulvinar diam lacinia eget. Nunc sed nunc rhoncus sem iaculis mollis vitae ac odio. </p>
	</section>
</div>
<footer><p>Pied de page</p></footer>

CSS

ul, p {margin:0;padding:0;}
html, body {margin:0;min-width:800px;height:100%;min-height:500px;}
header, footer {display:table;width:100%;height:10%;text-align:center;text-transform:uppercase;font:700 110% sans-serif;color:#fff;}
header {background:#828282;}
header p, footer p {display:table-cell;vertical-align:middle;height:100%;}

body>div {overflow:hidden;position:relative;height:80%;background:#9f9f9f;}
nav, ul {height:100%;}
li {-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;vertical-align:top;width:50%;height:50%;}
li a {position:relative;display:block;height:100%;text-decoration:none;text-transform:uppercase;font:200% sans-serif;color:#fff;transition:all .4s ease;}
li span {position:absolute;}
li:nth-child(-n+2) {border-bottom:1px solid;}
li:nth-child(odd) {border-right:1px solid;}
li:nth-child(-n+2) span {top:5%;}
li:nth-child(odd) span {left:5%;}
li:nth-child(even) span {right:5%;}
li+li~li span {bottom:5%;}
li a:hover {color:#000;background:#FFE6BA;}
section {overflow:hidden;position:absolute;width:40%;padding-bottom:40%;top:50%;left:30%;margin-top:-20%;border:1px solid;background:#fff;border-radius:100%;}
section p {position:absolute;top:32%;padding:0 5%;}

footer {background:#000;}