JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
		<header>
		<img src="images/logo-fourchette-2.png" height="96px" width="278px" alt="logo-fourchette"/>
		</header>
		<ul class="acceuil">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="html/linguistique.html">Menus</a></li>
			<li><a href="html/langues.html">Informations pratiques</a></li>
			<li><a href="html/contacts">Contacts</a></li>
		</ul>
		<p class="azerty"><em>La fourchette: toujours plus cuit, toujours plus bon.</em></p><br>		
		
		<aside class="restaurant">
		<h3>Gastronomie</h3>
		<div class="bloc1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, 
		purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi 
		tristique senectus et netus et malesuada fames ac turpis egestas. pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</div>
		<h3>Produits</h3>
		<div class="bloc2>">Lorem ipsum dolor sit amet, consectétuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, 
							gurus lectus malesuada libero, Sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivarnus a tellus.
							 Pellentesque habitant morbi tristique senectus et netus ét malesuada fames ac turpis egestas, pharetra nonummy pede. MauriSet orci, 
							Aenean nec lorem. In porttitor; Donectaoreet nonummy.ugue. </div></aside>
    
		<main class="restaurant2"><h1>Le totalorium du totalier plié</h1>
		<p class="date"><em>le 21 novembre 2018 par Etienne Chapeau</em></p>
		<h3>Totalorium</h3>
		<div class="bloc3">Lorem ipsum dolor sit amet, consectétuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, 
							gurus lectus malesuada libero, Sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce...

CSS

.acceuil
{
vertical-align: center;
	
}
body
{
	background-image: url("images/back-cover.jpg");
	background-repeat: no-repeat;
    background-size : 100%; 	
}
footer
{
	text-align: right;
	border-top: 1px solid;
	margin-top: 40px;
}
li
{
	list-style: none;
	float: left;
	border-right: 1px solid;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;	
}
a
{
	text-decoration: none;
}
div.page
{
    width: 990px;
	height: 1000px; 	
	margin: auto;
	text-align: center;
	background-color: hsla(358,28%,95%,0.85);
	background-size : 100% 	
}
.restaurant
{
	width: 280px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
	float: left;
}
.restaurant2, h1, .date
{
	width: 640px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
overflow:hidden;
}

a:hover
{
	color: #d86c0c;
}

.bloc4
{
	padding-bottom: 40px;
	border-bottom: 1px solid;
}
h2
{
	text-align: left;
	padding-bottom: 10px;
	padding-left: 10px;
}
.bloc4,h2
{
	
}
.azerty	
{
	float: right;
}
ul 
{
		border-top: 1px solid;
		padding-top: 10px;
		border-bottom:1px solid;
		padding-bottom: 25px;
}
a 
{
	color: #000000;
}
h1,.date{
	
 margin:0
}
figcaption
{
	color: #b32;
}
figcaption:hover
{
	color: grey;
}
.imgs {width:max-content;margin:1em auto;}
.images
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, min-content));
  grid-gap: 1em;
  width:max-content;
  margin:0 auto;
}
figcaption
{
  grid-row: 2;
}