JSFiddle - React, Tailwind, and code Playground

HTML

<header class = "head1">
  <h1 class="title" id="titre">TITLE</h1>


  <div class="separator"></div>
  <nav class="menuBar">
    <ul>
      <li class="accueil">
        <a class='linkAccueil' href="../index.php" ">1</a></li>
            <li class="normal ">
                2
                <div class="dropdown-content ">
                    <a href="# " title=" ">1</a> <br>
                    <a href="# ">2</a> <br>
                    <a href="# ">3</a> <br>
                    <a href="# ">4</a> <br>
                    <a href="# ">5</a> <br>
                </div>
            </li>
            <li class="normal ">3</li>
            <li class="normal ">4</li>
            <li class="normal ">5</li>
            <li class="normal ">6</li>
        </ul>
    </nav>
</header>

CSS

/*Header*/
.head1 {
    /*Taille et position*/
    position: fixed;
    width: 100%;
    min-width: 1000px;
    height: 253px;
    margin-bottom: 0px;
    z-index: 1;

    /*Style*/
    background-color: rgb(43, 39, 33);
}

.title {
    /*Style du texte*/
    font-size: 60px;
    color: rgba(175, 0, 0, 1);
    text-align: center;
    font-family: "Helvetica Neue";
    font-weight: 100;

    /*Taille et position*/
    position: absolute;
    display: inline-table;
    bottom: 53px;
    width: 33.333%;
    left: 33.333%;
    margin: auto;
}

.linkAccueil {
    display: inline-block;
    width: 100%;
    height: 100%;

    font-family: "Apple symbols";
    font-size: 23px;
    text-align: center;
    text-decoration: none;

    color: rgba(175, 0, 0, 1);

}

.linkAccueil:hover {
    color: rgba(255, 255, 255, 1);

}
/*Pour que ce soit le td en entier qui soit le lien*/

#logo {
    position: absolute;
    display: inline-table;
    width: 120px;
    top: 20px;
    left: 50%;
    margin-left: -60px;


}

.logoSmaller {
    position: absolute;
    display: block;
    width: 40px;
    top: 7px;
    left: 42%;

}

.separator {
    position: absolute;
    z-index: 1;
    bottom: 45px;
    width: 100%;
    height: 3px;

    background-color: rgba(175, 0, 0, 1);

}

/*Header-MenuBar*/

.menuBar {
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 50px;

    background-color: rgb(43, 39, 33);
}

.navigation {

    width: 90%;
    padding-left: 10%;

}

.accueil {
    position: relative;
    display: inline-block;
    width: 14%;
    height: 27px;
    top: 17px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding-left: 9%;
}
.normal {
    position: relative;
    display: inline-block;
    width: 14%;
    height: 33px;
    top: 17px;


    font-family: "Apple symbols";
    font-size: 23px;
    text-align: center;
    color: rgba(171, 171, 171, 1);
}

.normal:hover {
    color: rgba(255, 255, 255, 1);
}

.dropdown-content {
    display: none;
   ...