JSFiddle - React, Tailwind, and code Playground

HTML

<div id="entete-de-page"> 
		
	</div> 
	<div id="menu">
		<table  border="1">
		<tr>
			<th id="bloc-menu">🍻 <a href="../index.html">Présentation</a></th>
			<th id="bloc-menu">📑 <a href="menu.html">Menu </a></th>
			<th id="bloc-menu">📅 <a href="reservations.html">Réservations </a></th>
			<th id="bloc-menu">📬 Recrutement </th>
			<th id="bloc-menu">👨‍💼 <a href="connexion.php">Espace employé </a></th>
		</tr>
		</table> <br/> 
	</div>
	<div id="contenu">
		<h1> Rejoignez l'équipe du Yellow Jack 📬 </h1>
		<p class="tkt"> Rendez-vous sur le salon Candidature du Yellow Jack ou directement sur le Google Forms </p>
		<table id="table-choix" border="0">
		<tr>
			<th></th>
			<th id="couleur"><p>Accéder au <a href="https://discord.gg/H9XVAYhKA9">Salon Candidature </a></p></th>
			<th></th>
			<th id="couleur"><p>Accéder au <a href="https://forms.gle/G9T5svmucYqU8L5n6">Google Form</a></p></th>
			<th></th>
		</tr>
		</table>
		<br/><br/>
		<img src="../images/recrutement.png" alt="image de recrutement" width= 720px height= 360px>
		<br/><br/><br/>
		<h1> Retrouvez vos résulats 📝 à chaques vagues de recrutements </h1>
		<table id="table-choix" border="0">
		<tr>
			<th></th>
			<th></th>
			<th id="couleur"><p>Accéder aux <a href="https://discord.gg/pDscSHdwRF">Résultats </a>✅</p></th>
			<th></th>
			<th></th>
		</tr>
		</table>
		<h4> Le désir rencontre la bonne bière 🍻</h4>
		<hr>
		<table id="bloc-menu-bas" >
		<tr>
			<th><p>⬅️ <a href="reservations.html">Réservations </a>📅<p/></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		</table>
	</div> <br/>

CSS

html{
	height:100%;
}
body, div {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Math, Serif , Bold;
}
body {
	background-color: beige;
	font-family: Math, Sherif, Bold;
	font-size: 18px;
}
img { 
	float: center; 
	margin-right: auto;
	margin-left: auto;
	border-style:solid;
	border-width:8px;
}
th { width: 400px;}
ul { list-style-type: square; }

#entete-de-page {
	padding: 10px 20px;
	height: 160px;
	background-image: url("../image.png");
	background-repeat:no-repeat;
	background-attachment: scroll;
	background-size:cover;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	width: 100%;
	font-variant:caps;
}

#menu {
	color:white;
	background-color: #478f80;
	height:40px;
	width:100%;
}
#bloc-menu{
	
}
#bloc-menu-bas {
	height: 36px;
	float: center;
	color: white;
	font-size:22px;
	bottom:0;
}
#table-choix {
	float:center
}
#couleur{
	background-color:#ffbd2c;
	border-style:solid;	
	border-color:#644a28;
	border-top-left-radius:30px;
	border-top-right-radius:30px;	
	border-bottom-left-radius:30px;	
	border-bottom-right-radius:30px;		
}
#contenu {
	padding: 10px;
	background-color: beige;
	text-align:center;
}
#infos {
	color: darkblue;
	font-style: italic;
}
#pied-de-page {
	padding: 5px;
	background-color: lightgrey;
	font-size: 11px;
}
.tkt{
	font-family: Math, Sherif, Bold;
	font-size: 26px;
}
hr{
	height:20px;
	border:none;
	background-color:#478f80;
}
h4{
	color :#f68925;
	font-family: Math, Serif , Bold;
	font-size:25px;
	font-weight: bold;
	text-align:center;
	
}