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="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" width="304" height="194">
                           <h3>EXAMPLE</h3>
                        </a>

                        </div>
                        <div id="bottom-left-bottom"> <a href="#">
                           <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.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="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" width="311" height="406">
                        <h3>EXAMPLE</h3>
                     </a>

                        </div>
                    </div>
                    <div id="bottom-right-content">
     ...

CSS

body {
    margin: 0;
}

#design-background {
    position:absolute;
    height:350px;
    top:50%;
    left:0px;
    right:0px;
    margin-top: -175px;
    /* background: url('../images/background-dec.jpg'); */ 
    background: pink;
}
#content {
    position:relative;
    margin: 0 auto;
    /* width:980px; */
}
#all-content {
    display:block;
    /* position:relative; */
    /* width:98.9%; */
    width:980px;
    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: -70px;
    text-align: right;
    float: 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%;
    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: absolute;
    top:50%;
   ...