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>Grille responsive Page 193 Flexbox et Grid</title>
		<style>
			body {
				padding: 10px;
			}
			/* Grille commune */
			#conteneur {
				/* Grille de mise en page */
				display: grid;
				gap: 5px;
				/* Mise en forme */
				width: 100%;
				margin: auto;
			}
			/* Requête de média */
			@media screen and (min-width: 768px){
				#conteneur {
					grid-template-columns: 1fr 265px;
					gap: 20px;
			}
				header, footer {
					grid-column-start: 1;
					grid-column-end: 3;
			}
			}
			/* Mise en forme */
			header, footer {
				background-color: #eee;
				text-align: center;
			}
			aside {
				background-color: #bbb;
			}
			header, main, aside, footer {
			  border: 1px solid #000;
				padding: 10px;
			}
      header, footer {
        background-color: antiquewhite;
      }
      main {
        background-color: lightblue;
      }
			p {
				margin: 0 0 20px 0;
			}
      H1 {
        color:blue;
      }
		</style>
	</head>
	<body>
		<div id="conteneur">
			<header>
				<h1>RENDRE LA GRILLE RESPONSIVE</h1>
			</header>
			<main>
				<p>Nous voulons que cette grille soit responsive pour s'afficher de manière diffèrente sur les petits écrans.</p>
				<p>En ce qui concerne la mise en forme commune aux grands et petits écrans, la régle CSS pour le conteneur parent de la grille est modifiée. Nous indiquons une gouttière plus étroite de 5px pour l'affichage sur les petits écrans [gap: 5px;]. Cette valeur sera plus importante dans la requête de média pour les grands écrans.<br>
        <br>
Nous supprimons l'indication du nombre de colonnes et de leur largeur. Ainsi c'est la valeur par défaut qui sera utilisée. Cette valeur initiale est à [none]. Donc, sans indicationl'affichage se fera sur une seule colonne.<br>
        <br>
 La requête média s'applique aux écrans ayant une largeur minimale de 768px.<br>
        Pour...