JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

      <h2>> Spelerskern 2014/2015</h2>
        
      <div id="kern">

            <h2>Trainerstaf</h2>       
            <ul id="trainers">          
                <li><a href="BEERENS Serge.JPG" rel="shadowbox[spelers]"><img src="BEERENS Serge.JPG" width="180px" alt="speler"/></a><p>BEERENS</p><p>Serge (T1)</p></li>
                <li><a href="2.JPG" rel="shadowbox[spelers]"><img src="2.JPG" width="180px" alt="speler"/></a><p>VAN LIERDE</p><p>Luc (T2)</p></li>
                <li><a href="VERPAELST Philippe.JPG" rel="shadowbox[spelers]"><img src="VERPAELST Philippe.JPG" width="180px" alt="speler"/></a><p>VERPAELST</p> <p>Phillipe (KT)</p></li>
                <li><a href="GEEROMS Bert.JPG" rel="shadowbox[spelers]"><img src="GEEROMS Bert.JPG" width="180px" alt="speler"/></a><p>GEEROMS</p> <p>Bert (Ploegafgevaardigde)</p></li>
                <li><a href="Kine.JPG" rel="shadowbox[spelers]"><img src="Kine.JPG" width="180px" alt="speler"/></a><p>VAN DE VELDE</p> <p>Wendy (Kinésist)</p></li>
           </ul>
           
            <h2>Keepers</h2>
            <ul id="keepers">          
                <li><a href="DE BACKER Glenn.JPG" rel="shadowbox[spelers]"><img src="DE BACKER Glenn.JPG" width="180px" alt="speler"/></a><p>DE BACKER</p> <p>Glenn</p></li>
                <li><a href="VERPAELST_Jeroen.JPG" rel="shadowbox[spelers]"><img src="VERPAELST_Jeroen.JPG" width="180px" alt="speler"/></a><p>VERPAELST</p> <p>Jeroen</p></li>
                <li><a href="8.JPG" rel="shadowbox[spelers]"><img src="8.JPG" width="180px" alt="speler"/></a><p>SCHAUMANS</p> <p>Steven</p></li>
           </ul> 
           
           <h2>Verdedigers</h2> 
           <ul id="verdedigers">          
                <li><a href="9.JPG" rel="shadowbox[spelers]"><img src="9.JPG" width="180px" alt="speler"/></a><p>VAN LONDERSEELE</p> <p>Bram</p></li>
                <li><a href="DU MONGH Kim.JPG" rel="shadowbox[spelers]"><img src="DU MONGH Kim.JPG" width="180px"...

CSS

body {
  margin: 0;
  padding: 0;
  background: url('body.jpg') no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Arial, Georgia, Cordia New, Arial, Helvetica;
  font-size: 15px;
  color: #003663;
}
ul#trainers, ul#keepers, ul#verdedigers, ul#middenvelders, ul#aanvallers{display:block!important; max-width:1000px; overflow-x:auto;}


body link {
  color: #003663;
}

a:visited { color: #003663; }

a:hover { background-color: #F4E997; }

a { text-decoration: none;}

#header_container, #container, #laatstenieuws_container, #topmenu_container, #einde_container {
  width: 1024px;
  margin: 0 auto;
}

#header {
  margin: 0px auto;
  padding: 4px 0 2px 0;
  width: 100%;
  height: 50px;
  background: #F4E997;
  float: left;
}

#header_container {
  margin: 0px auto;
  padding: 0px;
  height: 50px;
}

#logomeerbeke {
  margin: 0px auto;
  padding: 0px 0 0 296px;
}

#logo2e {
  margin: 0px auto;
  padding: 0px;
}


#topmenu {
  margin: 0 0 10px 0;
  padding: 0px;
  height: 30px;
  width: 100%;
  background: #003663;
  float: left;  
}

#topmenu_container {
  background: #003663;
  height: 30px;
}

#menulijst {
  clear: both;
  overflow: visible;
  list-style-type: none;
  background: #003663;
  margin: 0px auto;
  padding: 0px;
  float: left;
}

#menulijst ul {
  margin: 0px auto;
  padding: 0px;
}

#menulijst li {
  margin: 0px auto;
  padding: 6px 0 0 0px;
  float: left;
  color: white;
  display: inline;
  width: 170px;
  text-align: center;
}

#menu ul li ul {
  position: absolute;
  width: 170px;
  left: -1000px;
  padding: 7px 0 0 0;
  margin: 0px auto;
  background: #003663;
}

#menu ul li ul li {
  border-top: 1px solid white;
  padding: 3px 0 3px 0;
}

#menu li:hover ul {
  left: auto;
  z-index: 99999;
}



#menulijst a {
   color: white ;
   text-decoration: none;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
}



h2 {
 ...