JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <img id="bgimg" src="images/bg2.jpg" style="width: 1920px; height: 1439.4707828004412px; left: 0px; top: -251.5px; ">

<div id="realBody">
  <div id="container">
    <div id="grid">
  <table width="100%" height="200"  border="0" cellspacing="0" cellpadding="10">
  <tr>
     <td width="2%" rowspan="2">&nbsp;</td>
    <td width="21%" rowspan="2">&nbsp;</td>
    <td width="2%" rowspan="2">&nbsp;</td>

    <td width="23%"  class="blue"><span class="teal"><a href="#">link 1</a></span></td>
    <td width="26%"  class="orange"><span class="teal">link 2</span></td>
    <td width="26%"   class="purple"><span class="teal">link 3</span></td>
  </tr>
  <tr>
    <td width="23%" class="teal">link 4</td>
    <td width="26%"   class="skyblue"><span class="teal">link 5</span></td>
    <td width="26%"  height="100" class="green" ><span class="teal">link 6</span></td>
  </tr>
</table>

        
        
    </div>
            </div>
            
    </div>
</body>

CSS

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }



body {
    overflow:hidden;       
    padding:0;margin:0;        
    height:100%;width:100%;
}

#bgimg {
    position:absolute;
    z-index: -1;
}

#realBody{
    top:30%; 
    position: absolute;
    z-index: 5;                
    overflow:auto;             
    height:100%;
    width:100%;    
    background: url('../img/raster.png'); */
    
    

  
}


#container {
    width: 100%
    height: 50%
    margin: auto;
    margin-top: 0px;
    padding-top: 10px;
    
    text-align:center;
}

#container h1 {
    color:#fff;

    
}




#grid {
    
     background:rgba(0,0,0,.5); 
     
 position:relative ;

}

#grid h2{
    color: #fff;

}


#grid p{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    margin-bottom: 3px;
    font-size: 12px;
    font-family: helvetica, sans-serif;
    margin-top: 0px;
    width: 650px;
    line-height: 18px;
}



#grid img {
    
    border: 0px solid #000;
    display: block;
    margin-left: auto;
    margin-right: auto
}

#grid a:hover img{
    
}

#header a{
    color: #fff;
    margin: 0;
    padding: 10px;
    display: block;
    background:rgba(0,0,0,.8);
    text-align: center;
}





td.blue span, td.blue span a {
    display: block;
    height: 100%;
    width: 100%;
}


td.blue {
    background:rgba(0,5,238,.8);

    color:#FFF;
    text-align:right;
    font-size: 30px;
    line-height: 30px;
  
}



td.blue:hover {
 
  background:rgba(0,55,254,.8);
  
}




td.orange {
  background:rgba(202,92,57,.8);
    color:#FFF;
    text-align:right;
    font-size: 30px;
    line-height: 30px;

}

td.orange:hover {
   background:rgba(213,142,74,.8);
}

td.purple {
  background:rgba(94,30,140,.8);
  color:#FFF;
    text-align:right;
    font-size: 30px;
    line-height: 30px;


}

td.purple:hover {
   background:rgba(115,67,146,.8);
}


td.teal {
  background:rgba(90,116,164,.8);
  color:#FFF;
    text-align:right;
   ...