JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bloc_page">
				<header>
					<div id="logo">
						<img src="images/logo.png" alt="webdesign logo">
					</div>
					<nav id="menu">
						<ul>
							<li>
								<i class="fa fa-home"></i>
								<a href="#bloc_page">Accueil</a>
							</li>
							<li>
								<i class="fa fa-code"></i>
								<a href="#Services">Services</a>
							</li>
							<li>
								<i class="fa fa-picture-o"></i>
								<a href="#Portfolio">Portfolio</a>
							</li>
							<li>
								<i class="fa fa-pencil-square-o"></i>
								<a href="#Contact">Contact</a>
							</li>
						</ul>
					</nav>
				</header>
				<div id="slider">
					<ul id="slid2">
						<li>
							<img src="images/slider/bg1.jpg" alt="image enfant">
						</li>
						<li>
							<img src="images/slider/bg2.jpg" alt="image enfant">
						</li>
					</ul>
				</div>
				<div id="slide3">
					<div id="slider-left">
						<a href="#slider"><i class="fa fa-angle-left"></i></a>
					</div>
           	 		<div id="slider-right">
           	 			<a href="#"><i class="fa fa-angle-right"></i></a>
           	 		</div>
				</div>
				<div id="annonce">
					 <h1><em>WEBAGENCY</em>: L'AGENCE DE TOUS VOS PROJETS!</h1>
					 <p>Vous avez un projet web? La <em>WebAgency</em> vous aide à le réaliser!</p>
					 <a href="#" id="bouton_info">Plus d'info</a>
				</div>
			<!--debut de section-->
				<section id="Services">
						<h1>Nos services</h1>
					<div class="separator">
						<p><span>&bull;</span></p>
					</div>
						<p>Nous gérons votre projet de <em>A</em> à<em> Z</em> : 
						Design, code, référencement, ...<br />
						Avec la <em>WebAgency</em>, bénéficiez de  conseils avisés pour affirmer votre présence sur le <em>Web</em> !</p>
					<div id="main-feature">
							<img src="images/main-feature.png" alt="ecran d'ordi">
						<div id="expo">
							<h2>UX design</h2>
								<p><i class="fa fa-line-chart" aria-hidden="true"><span class="bulle">&bull;</span></i>Nous suivons de près les nouvelles...

CSS

body{
	margin: 0;
	padding: 0;
}
#bloc_page{
	width: 100%;
	margin: 0 auto;
}
em{
	color: #0bbfff;
	font-weight: bold;
}
h1{
	font-size: 2.1em;
	font-family: verdana, Courier, serif;
}
img{
	max-width: 100%;
}
/***début du header***/
header{
	width: 100%;
	height: 11vh;
	background-color: #F8F8FF;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

header nav ul{
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	width: 200%;
}
header nav li{
	margin-right: 15px;
	font-size: 20px;
	/*width: 100%;*/
}
header nav li a{
	text-decoration: none;
	color: #000;
	padding-top: 28px;
}
#logo{
	margin-top: 10px;
}
header a:hover{
	border-top: 3px solid #0bbfff;
	color: #0bbfff;
}
.fa-home, .fa-code, .fa-picture-o, .fa-pencil-square-o{
	color: #0bbfff;
	padding-right: 5px;
}
/****début du slider*************************************************/
#slider{
	width: 100%;
	height: 600px;
	position: relative;
	overflow: hidden;
	padding-top: 40px;
}
#slid2{
	position: absolute;
	width: 200%;
	height: 600px;
	left: 0;
	margin: 0;
	padding: 0;
	transition: left 2s;
	/*padding-top: 40px;*/
}
#slider3{
	position: relative;
}
#slider:target #slid2{
	left:-100%;
}
#slider img{
	height: 600px;
}
#slider ul{
	list-style-type: none;
	display: flex;
}
#slider-left, #slider-right{
	position: absolute;
	top: 40%;
	width: 50px;
	height: 50px;
	border: 1px solid gray;
	border-radius: 50%;
	cursor: pointer;
	line-height: 50px;
	font-size: 40px;
}
#slider-left{
    left: 5px;
}
#slider-right{
  left: inherit;/**ici je ne savais comment faire et en tapant inherit il a pris sa place**/
  right: 5px;
}
.fa-angle-left, .fa-angle-right{
	position: absolute;
	left: 20px;
	top: 5px;
	color: #fff;
	opacity: 1;
}
#slider-left:hover, #slider-right:hover {
    background-color: gray;
    opacity: 0.4;
}
/*fin du slider*****************************************************/
/*début de...