JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header id="cabecalho">
        <nav id="menu">
            <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Contact</li>
            </ul>
        </nav>
    </header>
</body>

CSS

*{
              padding: 0;
              margin: 0;    
          }
          html{
              width: 100%;
              height: 100%;
          }
          body{
              width: 100%;
              height: 100%;
          }
          header#cabecalho{
            width: 100%;
            height: 40%;
            background-color: rgb(60, 92, 86); 
            overflow: hidden;
            position: relative;
          }
          nav#menu{
            display: block;
            height: 50%;
            width: 100%;
            overflow: hidden;
            position: relative;
            background-color: red;
            top: 50%;
            transform: translateY(-50%);
          }
          nav#menu ul{
            height: 100%;
            width: 100%;
            list-style: none;
          }
          nav#menu ul li{
              display:inline-block;
              color: white;  
          }