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: 1200px; 
    }
    /*** Mise en page flexible ***/
    header {
      display: flex;
      flex-direction: column;
    }
    nav, main {
      display: flex;
    }
   /* main {
      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 {
      text-decoration: none;
      color: #000;
    }
    nav a: hover {
      color: #fff;
    }
    /* Barres latérales */
    #gauche, #droite {
      background-color: lightgray;
    }
    #gauche a, #droite a {
      text-decoration: none;
      color: #000;
    }
    /* Marge des titres */
    h1, h2, h3 {
      margin: 0;
      margin-bottom: -5px;
    }
  </style>
</head>
<body>
<div id="conteneur">
  <header>
    <h1>SITE WEB</h1>
    <h2>Mise en page flexbox</h2>
  </header>
  <nav>
    <p><a href="#">Accueil</a></p>
    <p><a href="#">Projets</a></p>
    <p><a href="#">Articles</a></p>
    <p><a href="#">Concepts</a></p>
    <p><a href="#">Réalisations</a></p>
    <p><a href="#">Clients</a></p>
    <p><a href="#">Boîte à idées</a></p>
    <p><a href="#">Contact</a></p>
  </nav>
  <main>
    <aside id="gauche">
      <h3>Liens</h3>
      <p><a href="#">Lien 1</a></p>
      <p><a href="#">Lien 2</a></p>
      <p><a href="#">Lien 3</a></p>
      <p><a href="#">Lien 4</a></p>
      <p><a href="#">Lien 5</a></p>
      <p><a...