JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Mise en page flexbox P420</title>
  <meta charset="UTF_8"/>
  <style>
    #conteneur {
      margin: 0 auto; 
      max-width: 1400px; 
	}
    /*** Mise en page flexible ***/
    header {
      display: flex;
      flex-direction: column;
    }
    nav, main {
      display: flex;
    }
    main {
	  background: antiquewhite;
      /* word-break: break-all; */
    } 
    nav {
      justify-content: space-around;
    }
    #droite, #gauche {
      flex: 0 0 20%;
    }
    footer {
      display: flex;
      /* justify-content: center; */
    }
    /**** Mise en forme de toutes les boîtes ****/
    header, nav, #gauche, section, #droite, footer {
      padding: 15px;
    }
    /**** En-tête et pied de page ****/
    header, footer {
      background-color: #666;
      color: #fff;
    }
    header {
      text-align: center;
    }
    /* Barre de navigation */
    nav {
      background-color: #aaa;
    }
    nav a {					 /* Concerne les liens de la barre de navigation */
      text-decoration: none; /* Pas de soulignement du lien */
      color: #000;
    }
    nav a:hover {			 /* Changement de couleur au survol du lien */
      color: #fff;
    }
    /* Barres latérales */
    #gauche, #droite {
      background-color: lightgray;
    }
    #gauche a, #droite a {
      text-decoration: none;
      color: #000;
    }
	#gauche a:hover {
		color: #fff;
	}
	#droite a:hover {
		color: #fff;
	}
    /* Marge des titres */
    h1, h2, h3 {
      margin: 0;
      margin-bottom: -5px;
    }
	.p1 {
		font-size: 16px;
	}
  </style>
</head>
<body>
<div id="conteneur">
  <header>
    <h1>SITE WEB</h1>
    <h2>Mise en page flexbox</h2>
  </header>
  <nav>
    <p><a href="acc.html">Accueil</a></p>
    <p><a href="proj.html">Projets</a></p>
    <p><a href="art.html">Articles</a></p>
    <p><a href="conc.html">Concepts</a></p>
    <p><a href="real.html">Réalisations</a></p>
    <p><a href="cli.html">Clients</a></p>
    <p><a...