JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container-content"> 
            <div id="design-background">
            </div>
            <div id="content">
 

                                     <div id="table-content">
                                                   
                     <table align="center">
                            <tbody><tr>
                                <td colspan="2" valign="bottom" style="font-family:ralewayregular; color: rgb(37,37,37); font-size: 110%; line-height: 150%;">
                                </td>                                 
                                <td><a href="/events/default/view/"><img src="/images/layout/layoutImg6.png" alt="" width="310" height="182"></a>
                                        
                                </td>
                            </tr>
                            <tr>
                                <td><a href="/events/default/view/"><img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194"></a><h3>EXAMPLE</h3></td>
                                <td rowspan="2"><a href="/events/default/view/"><img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406"></a><h3>EXAMPLE</h3></td>
                                <td><a href="/events/default/view/"><img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195"></a><h3>EXAMPLE</h3></td>
                            </tr>
                            <tr>
                                <td><a href="/events/default/view/"><img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195"></a><h3>EXAMPLE</h3></td>
                                <td><a href="/events/default/view/"><img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195"></a><h3>EXAMPLE</h3></td>
                            </tr>
                            <tr>
                                <td colspan="3" style="text-align:center; font-family: Semibold; color: rgb(165,97,11); font-size:300%;">Serving St. Catharines and Niagara...

CSS

#container-content{
    position:relative;
     margin: 0 auto;
     width:100%;
     min-height:700px;         
     background-color:#FFF;
}

#design-background{
    position:absolute;
    height:350px;    
    top:50%;
    left:0px;
    right:0px;    
    margin-top: -145px;    
    background: url('../images/background-dec.jpg');    
}

#content{     
    position:relative;    
    margin: 0 auto;
    left:0;
    right:0;
    width:980px;
    
}

#table-content{
    position:absolute;
    margin-top:-30px;
}

#table-content table tr td{
    position: relative;
    padding:8px;
}

#table-content table tr td h3{
    display:none;
}

#table-content table tr td a:hover + h3{
    color:#FFF;
    display:block;
    position: absolute;       
    z-index:10;    
    margin: auto;
    top:0;
    bottom:0;
    left:8px;
    right:10px;              
    font-family: ralewayregular;
    height:50px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    padding-top:25px;
    font-size: 200%;
    
}