JSFiddle - React, Tailwind, and code Playground

by vzytoi

HTML

<div class="menu">
      <ul class="menu-elements">
        <li>Acceuil</li>
        <li>Chambre</li>
        <li>salon & Chevaux </li>
        <li>Les Environs</li>
        <li>Tarif & Contact</li>
      </ul>
    </div>
    
    <div class="banniere">
     <ul class="banniere-elements">
           <li>Bienvenue</li>
            <li>au</li>
             <li>Chateau de Praisnaud</li>
     </ul>
    </div>

CSS

* {
  padding: 0;
  margin: 0;
}

div.menu {
  width: 100%;
  height: 50px;
  line-height: 50px; /* centrer verticalement */
  background: #D3D3D3;
  text-align: center; /* centrer horizontalement */
}

ul.menu-elements li {
  display: inline;
  color: gray;
  padding: 0 1vw 12.5px 1vw;
  list-style: none;
}

ul.menu-elements li:hover {
  color: green;
  cursor: pointer;
  border-bottom: solid 3px green;
}

/* -------- BANNIERE ------- */

div.banniere {
  background: black;
  width: 100%;
  height: 175px;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

ul.banniere-elements {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

@media only screen and (max-width: 480px) {
  ul.menu-elements li:not(:first-child) {
    opacity: 0;
  }
}