JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="table-users">
   <div class="header">Global Consensus for Decent Work - ILO Core Conventions
   <p class="header-sub">red = no ratification, <br>green = ratification</p></div>
 
   <table cellspacing="0">
      <tr class="fixed">
         <th class="fontprob" style="" >Country</th>
         <th class="fontprob" title="Right to organize in a trade union"><p>Freedom of <br>Association</p></th>
         <th class="fontprob" title="Right to negotiate collective agreements"><p >Collective<br>Bargaining</p></th>
         <th class="fontprob" title="Suppress forced and compulsory labor"><p>Forced<br>Labor</p></th>
         <th class="fontprob" title="Abolition of forced labor"><p>Abolition of<br>Forced Labor</p></th>
         <th class="fontprob" title="Equal Pay"><p>Equal<br>Remuneration</p></th>
         <th class="fontprob" title="Discrimination at work"><p>Discrimi-<br>nation</p></th>
         <th class="fontprob" title="Minimum age for work"><p>Minimum<br>Age</p></th>
         <th class="fontprob" title="Abolition of the worst forms of child labor"><p>Child<br> Labor</p></th>
      </tr>
      <tr>
         <td><img src="http://www.boell.de/sites/default/files/_uploads/g_20/flags/argentinien.jpg" title="Argentina" /></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://www.boell.de/sites/default/files/_uploads/g_20/flags/australien.jpg" title="Australia" /></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-n"></td>
 ...

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://www.boell.de/sites/default/files/_uploads/g_20/images/protest-rot.png);}
.kollekt-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/handshake-rot.png);}
.zwang-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/chain-rot.png);}
.abzwang-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/chain_broken-rot.png);}
.entgeld-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/money-rot.png);}
.diskr-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/gleich-rot.png);}
.mindest-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/age-rot.png);}
.kinder-n:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/children-rot.png);}

.verein-j:after {background-image: url(http://www.boell.de/sites/default/files/_uploads/g_20/images/protest-gruen.png);}
.kollekt-j:after {background-image:...