JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
	<body>
		<header>
			<div id="banniere">
				<div id="logo">T</br>N</br>I N F O</div>
			</div>
		</header>
		
		<nav>
			<div id="menu">
				<ul>
					
					<li>
						<a href="index.html">Accueil</a>
					</li>
					<li>	
						<a href="#">Ordinateurs</a>
						<div class="sous_menu">
							<a href="#">PC de Bureau</a>
							<a href="#">PC Portables</a>
							<a href="#">Accessoires</a>
						</div>
					</li>
					<li>
						<a href="#">Peripheriques</a>
						<div class="sous_menu">
							<a href="#">Claviers et Souris</a>
							<a href="#">Stockage externe et consommables</a>
							<a href="#">Ecrans</a>
						</div>
					</li>
					<li>
						<a href="#">Hardware</a>
						<div class="sous_menu">
							<a href="#">CPU processeurs</a>
							<a href="#">Cartes Mères</a>
							<a href="#">Cartes Graphiques</a>
							<a href="#">Memoires Ram</a>
							<a href="#">Disques dur Boitiers et PCI divers</a>
						</div>
					</li>
					<li>
						<a href="#">Software</a>
						<div class="sous_menu">
							<a href="#">OS Systèmes d'exploiation</a>
							<a href="#">Antivirus</a>
							<a href="#">Jeux Videos</a>
						</div>
					</li>
					<li>
						<a href="#">Panier</a>
					</li>
					<li>
						<a href="#">Connexion</a>
					</li>
				</ul>
				
				
			</div>
		</nav>
		
		<div id="container">		
			<div id="articles">
				<div class="categories">
					<h1>Ordinateurs</h1>
					<div class="filtres">
					</div>
					<div class="carte">
					</div>
					<div class="carte">
					</div>
					<div class="carte">
					</div>
					<div class="carte">
					<p>il etait une fois un petit babeuseu toumiseu qui etait toumiseu, il etait avec un babeusien
					qui lui aussi etait tout miseu, et ensemble ils babeutèrent comme des bébésat et des bébésien
					un jour ou ils s'aventurait pres du ruisseau bébésien trouva alors une pizza mais elle n'etait
					pas tres beuseuil etait une fois un petit babeuseu toumiseu qui etait toumiseu, il etait...

CSS

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Segoe UI,OpenSans,Noto,Helvetica Neue,Helvetica,Tahoma,Arial,FreeSans,sans-serif;
}

h1{
	font-weight: 100;
	border-bottom: 1px grey solid;
	width: 1060px;
	height: 45px;
	margin: 0 10px;
}

header{
	display:flex;
	width: 100%;
	height: 110px;
	background: #505050;
}

#banniere{
	display:flex;
	margin: auto;
	flex-direction: row;
	width: 1080px;
	height: 110px;
	padding: 5px; 
}

#logo{
	width: 100px;
	height: 100px;
	background: #00c308;
	margin: 0px 10px;
	padding: 5px;
	padding-top: 40px;
	color: white;
	font-size: 14px;
	font-weight: 100;
}

.boutons{
	margin: 0px 10px;
	width: 100px;
	height: 100px;
	background: #00c308;
	padding: 5px;
	color: white;
	font-size: 14px;
	font-weight: 100;
	background: purple;
}

#user{
	display: flex;
	align-self: baseline;
	width: 150px;
	height: 75px;
	background: #00c308;
}

nav{
	display: flex;
	justify-content: center;
	border-top: 1px #D1D1D1 solid;
	position: static;
	width: 100%;
	height: 50px;
	background: #5d5d5d;
	box-shadow: 0px 3px 3px grey;
}

#menu{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
}

nav ul{
	display: flex;
	max-width: 1080px;
	width: 100%;
	height: 49px;
	list-style: none;
}

nav ul li{
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	text-align: center;
	background: #5d5d5d;
}

nav ul li a{
	box-sizing: content-box;
	padding: 11px 0px;
	width:100%;
	font-family: "Segoe UI","Helvetica Neue" ;
	text-decoration: none;
	color: #EEEEEE;
	font-size: 20px;
	font-weight: 100;
}

.sous_menu{
	position: relative;
	display: none;
	width: 100%;
	background: white;
	box-shadow: 0px 0px 10px grey;
	font-size: 14px;
}

.sous_menu a{
	color: black;
}

.sous_menu a:hover{
	background: #00ce08;
}

nav ul li a:hover{
	color: white;
	background: #00c308;
}

nav ul li:hover>.sous_menu{
	display: flex;
	flex-direction: column;
}

#container{
	display:flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	max-width:...