JSFiddle - React, Tailwind, and code Playground

by bjorn1990

HTML

<!-- Update #81 is de meest recente veilig geteste update -->
<div id="test1"> </div>
<div id="test2"> </div>
<div id="test3"> </div>
<div id="test4"> </div>
<div id="test5"> </div>
<div id="test6"> </div>
<div id="test7"> </div>
<div id="test8"> </div>
<div id="test9"> </div>
<div id="test10"> </div>
<div id="test11"> </div>
<div id="test12"> </div>
<div id="test13"> </div>
<div id="test14"> </div>
<div id="test15"> </div>
<div id="test16"> </div>
<div id="test17"> </div>
<div id="test18"> </div>
<div id="test19"> </div>
<div id="test20"> </div>
<div id="test21"> </div>
<div id="test22"> </div>
<div id="test23"> </div>
<div id="test24"> </div>
<div id="test25"> </div>
<!-- Einde loggs -->


<table id="table2">
<tr> <td> Aanvaller </td> </tr>
  <tr> <td> 
  <img src="https://nl.wiki.tribalwars2.com/images/a/ad/Spearman.png">
  <img src="https://nl.wiki.tribalwars2.com/images/5/5a/Swordsman.png">
  <img src="https://nl.wiki.tribalwars2.com/images/f/f9/Axe_fighter.png">
  <img src="https://nl.wiki.tribalwars2.com/images/2/29/Archer.png">
  <img src="https://nl.wiki.tribalwars2.com/images/f/fc/Light_cavalry.png">
  <img src="https://nl.wiki.tribalwars2.com/images/2/25/Mounted_archer.png">
  <img src="https://nl.wiki.tribalwars2.com/images/2/2f/Heavy_cavalry.png">
  <img src="https://nl.wiki.tribalwars2.com/images/6/6a/Ram.png">
  <img src="https://nl.wiki.tribalwars2.com/images/5/51/Catapult.png">
  <img src="https://nl.wiki.tribalwars2.com/images/a/a8/Berserker.png">
  <img src="https://nl.wiki.tribalwars2.com/images/c/cf/Trebuchet.png">
  <img src="https://nl.wiki.tribalwars2.com/images/a/a6/Nobleman.png">
  <img src="https://nl.wiki.tribalwars2.com/images/b/b2/Paladin.png">
  </td> </tr>
  
  <tr> <td class="nummers">
  <div id="tot_speer_off" class="aantallen"> 0 </div>
  <div id="tot_zwaard_off" class="aantallen"> 0 </div>
  <div id="tot_bijl_off" class="aantallen"> 0 </div>
  <div id="tot_boog_off" class="aantallen"> 0 </div>
  <div id="tot_cav_off"...

CSS

#table2 {
  width: 727px;
} 

#table2 img {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
}

#table2 td {padding-right: 0;}

.aantallen {
  width: 50px;
  float: left;
  padding-right: 5px;
  text-align: center;
  background-color: red;
}

.aantallen_verliezen {
  width: 50px;
  float: left;
  padding-right: 5px;
  text-align: center;
  color: red;
}

.aantallen_medicus {
  width: 50px;
  float: left;
  padding-right: 5px;
  text-align: center;
  color: green;
}

.nummers {
  padding-top: 0;
  padding-bottom: 0;
}

#muur_level, #moraal {
  width: 50px;
  text-align: center;
  float: right;
}

.kerk h3 {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

.lvl input {
  width: 20px;
}

#nachtbonus {
  float: right;
}

.notes_aanvaller p {
  margin-top: 0;
  margin-bottom: 0;
}

Table {
  width: 500px;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    padding: 5px;  
}
th {
    text-align: center; 
    padding: 5px;
}

table img {
  width: 40px;
  height: 43px;
  float: left;
  margin-right: 5px;
}

input {
  width: 186px;
}

#test{
  text-align: center;
}

#test1, #test2, #test3, #test7, #test8, #test9 {color: #0B610B;}
#test4, #test5, #test6, #test10, #test11, #test12 {color: #3104B4;}