JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="style2.css" />
    <title></title>
  </head>
  
  <body>
    <div id="bandeau">
      <div id="logo">LOGO</div>
      <div id="titreSite">Mon site</div>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $("a.ajax").click(function() {
            $.ajax({
              type: "GET",
              url: $(this).attr("href"),
              success: function(retour) {
                $("#content").empty().append(retour);
              }
            });
            return false;
          });
        });
      </script>
      <div id="site">
        <div id="nav">
          <ul>
            <li id="first_li"><a class="ajax" href="">Texte1</a>
            </li>
            <li id="second_li"><a class="ajax" href="catalogue.html">Catalogue</a>
            </li>
            <li id="third_li"><a class="ajax" href="">Texte3</a>
            </li>
          </ul>
        </div>
        <div class="clear"></div>
        <div id="content"></div>
      </div>
    </div>
    <div id="menu">
      <div id="menu_haut"></div>
      <div id="menu_bas"></div>
    </div>
    <div id="contenu"></div>
    <div id="pied_page">t</div>
  </body>

</html>
<html>
  
  <head></head>
  
  <body> <a href="catalogue.html">catalogue</a>

  </body>

</html>

CSS

body {
  width:800px;
  margin:0 auto;
}
div {
  text-align: center;
}
div#bandeau {
  width: 800px;
  height: 400px;
  background-color: #00CCFF;
}
div#menu {
  float: left;
  width: 100px;
  height: 700px;
  background-color: #FF6699;
}
div#menu_haut {
  width: 100px;
  height: 350px;
  background-color: #66CC33;
}
div#menu_bas {
  width: 100px;
  height: 350px;
  background-color: #CC99CC;
}
div#contenu {
  float: left;
  width: 700px;
  height: 700px;
  background-color: #FFCC00;
}
div#pied_page {
  clear: both;
  width: 800px;
  height: 50px;
  background-color: #33FF99;
}
#bienvenue {
  text-align: center;
  border: 1px solid black;
  margin-right: 800px;
  width: 150px;
  height: 149px;
  position: relative;
}
#logo {
  text-align: center;
  border: 1px solid black;
  bottom: 153px;
  margin-left: 649px;
  width: 150px;
  height: 150px;
  position: relative;
}
#titreSite {
  font-size: 3em;
  text-align: center;
  bottom: 104px;
  margin-left: 300px;
  width: 200px;
  height: 0px;
  position: relative;
}
.clear {
  clear: both;
  margin-bottom: 15px;
}
#site {
  width: 800px;
  margin: 0 auto;
}
#nav {
  width: 700px;
  bottom: 20px;
  position: relative;
  margin: 0 auto;
}
#nav ul {
  list-style-type: none;
}
#nav ul li {
  float: left;
  width: 200px;
  background-color: black;
  margin-right: 10px;
  border: 2px solid white;
  text-align: center;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#nav ul li a {
  display: block;
  width: 100%;
  padding: 10px 0px;
  text-decoration: none;
  color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#content {
  width: 500px;
  overflow: hidden;
  margin: 0 auto;
}
.first_chapter {
  width: 500px;
}
.illustration {
  float: left;
  margin: 5px;
}
.texte {
  text-align: justify;
}
.second_chapter {
  background-color: lightGrey;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.second_chapter p {
  padding: 7px 0px;
}