JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="table-users">
   <div class="header">Globaler Konsens für menschenwürdige Arbeit – IAO-Kernarbeitsnormen
   <p class="header-sub">rot = keine Ratifizierung, <br>grün = Ratifizierung</p></div>
 
   <table cellspacing="0">
      <tr class="fixed">
         <th class="fontprob" style="" >Land</th>
         <th class="fontprob" title="Recht, einer Gewerkschaft beizutreten"><p>Vereinigungs-<br>freiheit</p></th>
         <th class="fontprob" title="Recht, Tarifverhandlungen zu führen"><p >Kollektiv-<br>verhandlungen</p></th>
         <th class="fontprob" title="Beseitigung von Zwangs- und Pflichtarbeit"><p>Zwangs-<br>arbeit</p></th>
         <th class="fontprob" title="Abschaffung Zwangs- und Pflichtarbeit"><p>Abschaffung<br> von Zwangsarbeit</p></th>
         <th class="fontprob" title="Gleichheit des Entgelts"><p>Gleichheit<br> des Entgelts</p></th>
         <th class="fontprob" title="Diskriminierung im Beruf "><p>Diskrimi-<br>nierung</p></th>
         <th class="fontprob" title="Mindestalter für Beschäftigung"><p>Mindest-<br>alter</p></th>
         <th class="fontprob" title="Beseitigung der schlimmsten Formen der Kinderarbeit"><p>Kinder-<br>arbeit</p></th>
      </tr>
      <tr>
         <td><img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Argentinien-1.jpg" title="Argentinien" /></td>
         <td class="ja verein-j"></td>
         <td class="ja kollekt-j"></td>
         <td class="ja zwang-j"></td>
         <td class="ja abzwang-j"></td>
         <td class="ja entgeld-j"></td>
         <td class="ja diskr-j"></td>
         <td class="ja mindest-j"></td>
         <td class="ja kinder-j"></td>  
      </tr>
     <tr>
     
         <td><img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Australien-1.jpg" title="Australien" /></td>
         <td class="ja verein-j"></td>
         <td class="ja kollekt-j"></td>
         <td class="ja zwang-j"></td>
         <td class="ja abzwang-j"></td>
         <td class="ja...

CSS

body {
  background-color: #fff;
}
body * {
  box-sizing: border-box;
}

.header {
  background-color: #9dcc58;
  color: white;
  font-size: 1.5em;
  padding: 1rem;
  text-align: center;
}

.header-sub {
  font-size: 0.8em;
  background-color: #aee363;
  width: 60%;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 10px;
  }

img {
  border-radius: 50%;
  height: 60px;
  width: 60px;
  border: 1px solid #474747;
}

.fontprob {
  font-size: 0.87em;
  color: #fff;
  font-weight: bold; 
}

.nein::after {
    background-size: 40px 40px;
    display: inline-block;
    width: 40px; 
    height: 40px;
    content:"";

}

.ja::after {
    background-size: 40px 40px;
    display: inline-block;
    width: 40px; 
    height: 40px;
    content:"";
}

.verein-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Protest-rot.png);}
.kollekt-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Handshake-rot.png);}
.zwang-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Chain-rot.png);}
.abzwang-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/chain_broken-rot.png);}
.entgeld-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Money-rot.png);}
.diskr-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/gleich-rot.png);}
.mindest-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/age-rot.png);}
.kinder-n:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/children-rot.png);}

.verein-j:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Protest-grün.png);}
.kollekt-j:after {background-image: url(http://xn--bleiwsten-u9a.de/wp-content/uploads/2016/11/Handshake-grün.png);}
.zwang-j:after {background-image:...