JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="global">
                <ul class="clearfix">
                    <li><a href="index.html" class="nav-home">Accueil</a></li>
                    <li><a href="particuliers.html" class="nav-part">Particuliers</a></li>
                    <li><a href="professionnels.html" class="nav-pro">Professionnels</a></li>
                    <li>
                        <a href="" class="nav-services">Services</a>
                        <ul>
                        <li><a href="" class="nav-tele">Télésurveillance</a></li>
                        <li><a href="" class="nav-assistance">Téléassistance</a></li>
                        <li><a href="" class="nav-intervention">Intervention</a></li>
                        <li><a href="" class="nav-sav">SAV</a></li>
                        <li><a href="" class="nav-app">My Alarm</a></li>
                        </ul>
                    </li>
                    <li><a href="" class="nav-options">Options</a></li>
                    <li><a href="" class="nav-about">Qui sommes-nous ?</a></li>
                    <li><a href="" class="nav-clients">Espace clients</a></li>
                </ul>
            </nav>

CSS

nav.global {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 43%, #d0d0d0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d0d0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 43%,#d0d0d0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 43%,#d0d0d0 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 43%,#d0d0d0 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 43%,#d0d0d0 100%); /* W3C */
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    box-shadow: inset 0px 1px 1px rgb(255,255,255), 0px 1px 2px rgba(0,0,0,0.67);
    margin-bottom:25px;
    position:relative;
    z-index:1000;
}

nav.global > ul > li {
    display:inline-block;
    margin-left:2%;
}

nav.global > ul > li:last-child {margin-left:4%;}

nav.global a {
    display:block;
    height:40px;
    line-height:40px;
    vertical-align:center;
    font-family: PTSans, 'Helvetica Neue', Helvetica, arial, sans-serif;
    color:#444;
    text-shadow: 0px 1px 0px #fff;
    padding:0 5px;
}

nav.global > ul > li:last-child a {
    color:darkred;
    font-variant: small-caps;
}

nav.global a:active, nav.global a:hover, #home .nav-home, #particuliers .nav-part, #pro .nav-pro {
    color:#2294dc;
    border:none;
}

nav.global > ul > li > a:active {
    color:aqua;
}

nav.global > ul > li:last-child a:hover {color:red;}

nav.global ul li ul {
    display:none;
    position:absolute;
    width:20%;
    padding:10px 7px 0 7px;
    background:white;
    -webkit-box-shadow: 0px 9px 3px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 9px 3px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 9px 3px 0px rgba(0,0,0,0.45);
   ...