JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="Tableau de bord"/>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="icon" href="img/content/icon.png"/>
    <title>HANDBALL-CLUB MANAGER | DASHBOARD</title>
  </head>
  <body>
    <header>
      <nav class="container">
        <ul class="menu">
          <li class="menu__list-item logo"><a class="menu__link" href="dashboard.php">HANDBALL-CLUB<br>MANAGER</a></li>
          <li class="menu__list-item"><a class="menu__link" href="#">Saison</a>
            <ul class="menu__sub">
              <li><a class="menu__link" href="menus/equipes.php">Equipes</a></li>
              <li><a class="menu__link" href="menus/resultats.php">Résultats</a></li>
              <li><a class="menu__link" href="menus/classements.php">Classements</a></li>
            </ul>
          </li>
          <li class="menu__list-item"><a class="menu__link" href="menus/agenda.php">Agenda du club</a></li>
          <li class="menu__list-item"><a class="menu__link" href="#">Médias</a>
            <ul class="menu__sub">
              <li><a class="menu__link" href="menus/photos.php">Photos</a></li>
              <li><a class="menu__link" href="menus/videos.php">Vidéos</a></li>
            </ul>
          </li>
          <li class="menu__list-item"><a class="menu__link" href="menus/partenaires.php">Partenaires</a></li>
          <li class="menu__list-item"><a class="menu__link" href="menus/matches.php">Gestion matches</a></li>
          <li class="menu__list-item"><a class="menu__link" href="#">Gestion incidents</a>
            <ul class="menu__sub">
              <li><a class="menu__link" href="menus/incident_materiel.php">Incident Matériel</a></li>
            </ul>
         ...

CSS

/* Reset */

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

/* Variables */

:root {
  --primary-color: #000000;
  --main-bg-color: #95a5a6;
  --colorhover: #7f8c8d;
}

/* General */

body{
  color: var(--primary-color);
  font-family: 'Verdana';
}

header{
    background-color: var(--main-bg-color);
}

ul {
  list-style: none;
  font-size: 14px;
  text-transform: uppercase;
}

a {
  color: currentColor;
  font-size: inherit;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Menu */

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  display: flex;
}

.menu__list-item {
  margin: 0 10px;
  display: flex; 
}

.menu__list-item--last {
  margin-left: auto;
}

.menu__link {

}

.menu__link:hover {
   background-color: red;
}

/* Sous-menu */

.menu__sub {
  display: none;
}