JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
            
                <ul>
                
                
                    <li><a href="#">Punkt1</a></li>
                    <li><a href="#">Punkt2</a></li>
                    <li><a href="#">Punkt3</a></li>
                    <li><a href="#">Punkt4</a></li>
                </ul>
            
        </nav>
        
        <p>
        Info : der hover effekt ist nur für größere Bildschirme bisher erstellt
        </p>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
}
body{
    width: 100%;
    background-color: rgba(120, 255, 255, 0.5); 
}



#nav{
    
    background: linear-gradient(45deg, yellow -30%, aquamarine 100%);
    width: 100%;
    padding: 10px 0px 10px 0px;
    box-shadow: 0px 3px 10px black;
    
}

ul{
    
    list-style-type: none;
    
}

li{  
   display: inline-block; 
    padding: 20px 0px 20px 0px;
    width: 20%;
    
}

a{
    text-decoration: none;
    color: black;
    font-size: 16pt;
    padding: 30px 158px;
    transition: 1s all ease-in;
   
}

a:hover{
    background-color: rgba(120, 255, 255, 0.5); 
    
}

p{
  margin-top: 10px;
  font-weight: 900;
  font-size: 16pt;
}