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>Page 199 Flexbox et Grid</title>
		<style>
			body {
				padding: 50px;
			}
			#conteneur {
				/* Grille de mise en page */
				display: grid;
				grid-template-columns: 250px 1fr 250px;
				gap: 20px;
				/* Mise en forme */
				width: 90%;
				margin: auto;
			}
      h1  {
        color: blue;
      }
      h3 {
        margin: 0px; /* Réduit l'espace entre le titre et le paragraphe */
      }
			header, footer {
				grid-column: 1/-1;
				background-color: lightgreen;
				text-align: center;
 			}
			nav {
				grid-column-end: 2; 
			}
			main {
				grid-column: 2;
			}
			aside {
				grid-column-end: -1; 
			}
			nav, aside {
				background-color: #bbb;
			}
			header, nav, main, aside, footer {
				border: 1px solid #000;
        border-radius: 6px;
				padding: 10px;
        font-size: 1.2em;
			}
      main {
        background-color: antiquewhite;
      }
			p {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<header>
				<h1>Utiliser les numéros négatifs dans les grilles</h1>
        <h3>
        <mark>HEADER</mark>
        </h3>
			</header>
			<nav>
				<p><mark>NAV</mark> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla.</p>
			</nav>
			<main>
				<p><mark>MAIN</mark> Vous avez certainement remarqué sur les captures d'écran précédentes avec les outils de développement de Mozilla Firefox activés que nous pouvons voir une numérotation négative. Cette dernière est affichée à droite et en bas de la grille. Nous pouvons les utiliser avec plus de facilité.<br>
        <br>En effet, dans le cas d'une grille de mise en page ayant de nombreuses colonnes et...