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;
			}
			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 {
			  word-break: break-all;  /* Passage texte à la ligne */
			  border: 1px solid #000;
				background-color: lightblue;
				color: #000;
        font-size: 1.1em;
			}
			article {
			  word-break: break-all;  /* Passage texte à la ligne */
				border: 1px solid #000;
        color: #000;
        font-size: 1.2em;
        background-color: antiquewhite;
			}
			h2, h3, p {
				padding: 10px;
			}
      h1 {
        color: blue;
        font-size: 2.5em;
      }
      h2 {
        color: blue;
        margin-bottom: -25px;
      }
      h3 {
        margin-top: -20px;
        color: blue;
      }
       .p1 {
        margin-bottom: -20px;
      } 
      .p2 {
        margin-top: -30px;
      }
			
	  /* 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 {
       ...