JSFiddle - React, Tailwind, and code Playground

HTML

<nav>


<a class ="navi" href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/>
<a class="navi" href="informatik.html">Informatik</a>
<a class="navi" href="schulplan.html">Fächer</a>
<a class="navi" href="anmeldeformular.html">Anmeldeformular</a>
<a class="naviaktiv"href="kontakt.html">Kontakt</a>


</nav>

CSS

a.navi
       {
         display: block;
         padding: 0.5rem;
         border-top: 0.1rem solid black;
         margin: 0.5rem;
		 text-decoration: none; 
         text-underline: none;
		 color: 000000;
    }
a.navi:hover 
      {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
   }
a.navi:visited 
       { 
     text-decoration: none; 
     text-underline: none;
	 color: 000000;
    }

a.naviaktiv
        {
	 display: block;
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
         margin: 0.5rem;
		 text-decoration: none; 
         text-underline: none;
		 color: #FF0000;
		}

nav
       {
          width: 1330px;
          height: 45px; 
          display: flex;
         justify-content: center;		  
       }