JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">&Uuml;ber Uns</a></li>
        <li><a href="#">Kalender</a></li>
        <li><a href="#">Fotos</a></li>
        <li><a href="#">Links</a></li>
        
    </ul>

CSS

html {
    background:black;
}

#navigation li{
    color: white;
    font-size: 20px;    
    display: inline-block;
    margin-left: 20px;
    margin-top: 5px;
    padding: 8px;
    border: 2px solid black;
    border-radius: 5px;
} 
#navigation li:hover{
    border: 2px solid #888888;
    background: #333333;    
}

a:link, a:visited {
    color: white;
    text-decoration: none;
}

#navigation li a:active, #navigation li a:focus{
    background: white;
    color:red;
}