JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container-content">
      
         <div id="content">
                        
            <div id="all-content">
               <div id="top-content">
                  <div id="top-left-content">
                     <div class="content-body" role="main" aria-label="Main Content Area"><div class="editorContent"><div style="font-family: ralewayregular; font-size: 120%; color: #a5610b; line-height: 200%; text-align: justify;">
<p>stuff</p>
</div></div><div style="clear:both;"></div></div>                  </div>
                  <div id="top-right-content">
                      <p>stuff</p>
                  </div>
               
               <div id="bottom-content">
                <div id="design-background">
                </div>
                   <div id="bottom-left-content">
                     <div id="bottom-left-top">
                        <a href="#">
                           <img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>
                     <div id="bottom-left-bottom">
                        <a href="#">
                           <img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>
                  </div>
                  <div id="bottom-center-content">
                    <div id="bottom-center">
                     <a href="#">
                        <img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406">                        <h3>EXAMPLE</h3>
                     </a>
                     </div>
                  </div>
                  <div id="bottom-right-content">
                     <div id="bottom-right-top">
                        <a href="#">
                           <img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195">    ...

CSS

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




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


#all-content{
    display:block;
    position:relative;
    width:98.9%;
    margin: 0 auto; 
       
}
#top-content{
    
    margin: 0 0 0 13px;
    position:relative;
    display:block;
    width:98.9%;
    min-height: 165px;
    
    
}
#top-left-content{
    position:relative;
    width:65%;
    left:0;
    margin-top: 10px;
    
}
#top-right-content{
    position:absolute;
    right:0;
    top:0;
    width:35%;    
    margin-top: -30px;
    text-align: right;
          
}
#bottom-content{
    position:relative;
    display:block;    
    text-align:right;
    height:407px;
    
}
#bottom-left-content{
    width:33%;
    position:relative;
     float:left;
     height:407px;
     margin-right:3.5px; 
     
}
#bottom-center-content{
    position:relative;
    width:33.33%;
     float:left;
     height:407px;
     text-align: center;    
     
}
#bottom-right-content{
    position:relative;
     float:right;
     width:33%;
     height:407px;
     
}
#bottom-left-top{    
    position:absolute;
    right:0;
     
     
}
#bottom-left-bottom{
    position:absolute;
    bottom:0px;
    right:0;  
}

#bottom-right-top{
    position:absolute;    
    right:0; 
}

#bottom-right-bottom{
    position:absolute;
    bottom:0px;
    right:0;       
}

#bottom-center{
    position:absolute;
    margin: 0 0 0 12px;
    left:0;
    right:0;
}
#bottom-text-content{
    position:relative;
    display:block;    
    width:100%;
    text-align:center; 
    font-family: Semibold; 
    color: rgb(165,97,11); 
    font-size:300%;
    vertical-align: middle;
}
#content h3{
    display:none;
}

#content a:hover h3{
    color:#FFF;
    display:block;
    position:...