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 responsive P228 F et G</title>
	<style>
		/* Mise en page Mobile First */
		#conteneur {
		/* Grille de mise en page */
			display: grid;
			grid-template-areas:
				"en-tete"
				"section"
				"article"
				"sidebar"
				"pied-page";
				gap: 10px;
				/* Mise en forme */
				width: 95%;
				margin: auto; /* Centre le conteneur horizontalement */
			}
			header {
				grid-area: en-tete;
			}
			section {
				grid-area: section;
			}
			article {
				grid-area: article;
			}
			aside {
				grid-area: sidebar;
			}
			footer {
				grid-area: pied-page;
			}
			
			/* Mise en forme commune */
			body {
				margin: 0;
				padding: 5px;
			}
			header, footer {
				background-color: #eee;
				text-align: center;
			}
			section, aside {
				background-color: #bbb;
				color: #fff;
			}
			article {
				border: 1px solid #000;
			}
			h2, h3, p {
				margin-left: 10px;
			}
			h1, h2, h3 {
				color: blue;
			}
			p {
				font-size: 1.2em;
			}
			
			
			/* Media Query écran tablette */
			@media only screen and (min-width: 768px)  {
				#conteneur {
        			grid-template-columns: 200px 1fr;
        			grid-template-areas:
    					"en-tete en-tete"
        				"section article"
						"sidebar sidebar"
        				"pied-page pied-page";
					width: 90%;
    			}
    		}
			/* Media Query grand écran */
			@media only screen and (min-width: 1024px)  {
				#conteneur {
        			grid-template-columns: 250px 1fr 250px;
        			grid-template-areas:
    					"en-tete en-tete en-tete"
        				"section article sidebar"
        				"pied-page pied-page pied-page";
					width: 80%;
    			}
    		}
	</style>
</head>

<body>
	<div id="conteneur">
		<header>
			<h1>Page responsive</h1>
		</header>
      
		<section>
			<h2 style="margin-bottom: -10px;">Les affichages responsives :</h2>
			<p>
          Pour cet exemple de...