JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="../leagueoflegendscss.css" type="text/css" ?>
<!DOCTYPE leagueoflegends SYSTEM "leagueoflegends.dtd">
<leagueoflegends xmlns="http://www.w3.org/1999/xhtml">
    <navigation>
        <a id="home" href="../startseite.xml">
            <nhome>Startseite</nhome>
        </a>
        <a id="lanes" href="../lanes/lanes.xml">
            <nlanes>Position</nlanes>
        </a>
        <a id="roles" href="../roles/roles.xml">
            <nrollen>Rollen</nrollen>
        </a>
        <a id="maps" href="../maps/maps.xml">
            <nmaps>Karten</nmaps>
        </a>
        <a id="ranks" href="../buildings/buildings.xml">
            <nbuildings>Gebäude</nbuildings>
        </a>
        <a id="spells" href="../spells/spells.xml">
            <nspells>Beschwörerzauber</nspells>
        </a>
    </navigation>
    <maps>
		<caption>Karten</caption>
        <map class="head">
            <mapname>Kartenname</mapname>
            <mapmode>Spielmodus</mapmode>
            <anzl>Anzahl der Linien</anzl>
            <tperl>Türme pro Linie</tperl>
            <inhibperl>Inhibitoren pro Linie</inhibperl>
            <specials>Besonderes</specials>
        </map>
        <map class="summonersriftmap">
            <mapname>Kluft der Beschwörer</mapname>
            <mapmode>5 gegen 5</mapmode>
            <anzl>3</anzl>
            <tperl>3 + 2 Nexus Türme</tperl>
            <inhibperl>1</inhibperl>
            <specials>Rangliste möglich; Kluftherold, Baron, Feuer-, Erd-, Wind-, Ozean, Uralter-Drache, blauer und roter Buff</specials>
        </map>
        <map class="twistedtreeline">
            <mapname>Gewundener Wald</mapname>
            <mapmode>3 gegen 3</mapmode>
            <anzl>2</anzl>
            <tperl>3 + 1 Nexus Turm</tperl>
            <inhibperl>1</inhibperl>
            <specials>Rangliste möglich, Ekelschlund, Altare, stärkere Inhibitor/Nexus Türme</specials>
        </map>
        <map...

CSS

leagueoflegends{display: flex; justify-content: center; width: 100%; background: url("shurima.png"); background-attachment: fixed; background-size: cover;}

navigation{display: flex; width: 70em; height: 4em; border: 2px rgb(51, 102, 153); justify-content: space-around; background-color: rgb(51, 102, 153);}

a:hover,a:active{color: black; padding-top: 0.5em;}
a{color: rgb(218,165,32); text-decoration: none;}
				
nhome,nmaps,nrollen,nbuildings,nspells,nlanes{display: flex; padding-top: 0.55em; font-size: 25px;}

maps{display: table; width: 70em; position: absolute; top: 5.2em; border: 2px solid black; border-collapse: separate; border-spacing: 0.5em;}
map{display: table-row; background-color: rgb(131, 174, 132);}
map:hover{background-color: white; color: black;}
img{margin-top: 27em; position: absolute; width: 900px; height: 640px; visibility: hidden;}
.summonersriftmap:hover .summonersrift{visibility: visible;}
map.head{background-color: rgb(51, 102, 153); font-size: 150%;}


spellname,desc,dur,cd,range,
buldingname,hp,dmg,resi,
mapname,mapmode,anzl,tperl,inhibperl,specials,
champicon,champname,region,volk,schadenstyp,reichweitentyp,
icon,possl,diff,scndrole{display: table-cell; text-align: center; vertical-align: middle;}

champicon,champname,possl,diff,scndrole{font-size: 130%;}