JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<nav id="steuerungoben">

	<ul>
    	<li><a href="index.html">Startseite</a></li>
    	<li><a href="leistungsprofil.html">Leistungsprofil</a>
    	<li><a href="kontakt.html">Kontakt</a>
    	<li><a href="impressum.html">Impressum</a>
	</ul>

</nav>

CSS

*{
    margin: 0;
    padding: 0;
}
html{
    background-color: rgba(0,0,0, .8);
}
nav li{
    /* Punkte davor weg */
    list-style-type: none;
    /* Alle nebeneinander rutschen lassen */
    display: inline-block;
}
nav li>a{
    /* Strich drunter weg */
    text-decoration: none;
    /* Element zu einem "block" in der Zeile machen -> Damit man nicht nur den Text klicken kann.*/
    display: inline-block;
    /* Runde Ecken */
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    color: rgba(255,255,255, 1);
    border: 3px solid rgba(255,255,255, .5);
    /* Zeit für die veränderung bei hover festlegen */
    transition: all 0.5s;
    padding: 5px;
    margin: 10px;
}
/* Wenn man mit der MAus drüber geht */
nav li>a:hover{
    background-color: rgba(255,255,255, 1);
    color: rgba(0,0,0, 1);
    border: 3px solid rgba(0,0,0, 1);
}