JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Mise en page fluide / fusion cellules P262 F et G</title>
		<style>
			body {
				font-size: 1.2em;
			}
			/* Mise en page */
			#conteneur {
				display: grid; /* Affichage grille */
				grid-template-columns: repeat(4, 1fr); /* Quatre colonnes */
				grid-template-rows: repeat(6, 1fr);	   /* Six lignes */
				grid-gap: 10px; /* Gouttière de 10px */
				width: 90%;     /* Affichage 90% de la fenêtre du navigateur */
				margin: auto;   /* Grille centrée dans la fenêtre du navigateur */
				background-color: blue;
			}
			header, footer {
				grid-column: span 4;	/* Fusion sur quatre cellules */
				display: flex;		/* Affichage flexible */
				justify-content: center;	/* Centré sur l'axe horizontal */
				align-items: center;	/* Proprièté flexible, élément centré sur l'axe vertical */
 			}
			nav {
				grid-row: span 4;	/* Quatre cellules centrées verticalement */
				display: flex;		/* Affichage flexible */
				flex-direction: column; /* Eléments enfants"<a>" affichés en colonne les uns sous les autres */
			}
			div#b1, div#b4 {
				grid-column: span 2;
			}
			div#b8 {
				grid-column: span 3;
			}
			/* Mise en forme */
			#conteneur > * {
				margin: 0;
				padding: 5px;
				background-color: lightgreen;
			}
			#conteneur a {
				text-decoration: none;
				color: #000;
				margin-bottom: 10px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<main id="conteneur">
			<header>
				<h1>Fruits de saison de nos régions</h1>
			</header>
			<nav>
				<a href="#">Pommes</a> <!-- Enfants -->
				<a href="#">Pêches</a>
				<a href="#">Abricots</a>
				<a href="#">Fraises</a>
				<a href="#">Cerises</a>
				<a href="#">Melons</a>
				<a href="#">Poires</a>
				<a href="#">Raisins</a>
			</nav>
			<div id="b1">1. La pomme est une protectrice de la muqueuse de l'estomac, digestive, et antiseptique...