JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.fr/TN2/static/img/fondBattleTitle.png"></script>
<nav>
    <ul>
        <li><a href="index.html" target="_blank">Accueil</a></li>
        <li><a href="modificationsindex.html" target="_blank">Modifications</a></li>
        <li><a href="gaumontpathe.html" target="_blank">Gaumont Pathé</a></li>
        <li><a href="artetessai.html" target="_blank">Art et Essai</a></li>
        <li><a href= "ugc.html" target="_blank">UGC Cinémas</a></li>
        <li><a href='mk2.html' target="_blank">MK2 Cinémas</a></li>
        <li><a href='newssite.html' target='_blank'>News</a></li>
        <li><a href='staff.html' target='blank'>Staff</a></li>
    </ul>
</nav>

CSS

body {
  background:grey;
}

nav {
    display:flex;
    justify-content:center;
    height:100px;
}
 
nav ul {
    position: relative;
    padding-top: 15px;
    margin-left: -30px;  
    list-style-type: none;
    display:flex;
    flex-wrap:wrap;
    justify-content:initial;
}

nav ul li {
    height:30px;
    margin-bottom:15px;
    margin-right:5px;
}
 
nav ul li a {
    text-align: center;
    padding: 10px;
    background-color: antiquewhite;
    color: black;
    text-decoration: none;
}
 
nav ul li a:hover {
    color: whitesmoke;
    background-color: deepskyblue;
    background: url(https://terre-noire.fr/TN2/static/img/fondBattleTitle.png) repeat;
}