JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">  
<div id="top">
        <div class="section one">NEGOTIATIONS</div>
        <div class="section two">IMPPLEMENT AND <br> TRACK CHANGES</div>
        <div class="section three">LABOR RELATIONS</div>
        <div class="section four selected"> NEGOTIATIONS <br> PREPARATION </div>
<div class="background"></div>        
    </div>
    <div class="bottom">
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
       ...

CSS

body{
    position:relative;
    margin:0 auto;
    padding:0;
    width:100%;
    font-family: 'Arial';
    font-size:12px;
}

a{
    color:#2e6099;
    text-decoration: none;
    font-family:'Arial';
}
a:hover{
    color:#20456d;
    text-decoration: none;
    font-family:'Arial';
}

.wrapper{
    width:698px;
    margin:0 auto;
}


#top{
    width:698px;
    margin:0 auto;
    height:40px;
    font-size:12px;
    color:#ffffff;
    text-align:center;
}
.background{
    position:absolute;
    background: url('http://i.imgur.com/KnOId7W.png') no-repeat;
    background-position:0px 0px;
    width:698px;
    height:40px;
    z-index:-2;
}

.section{
    float:left;
    width:170px;
    height:100%;
    cursor: pointer;
    padding:0px;
    margin:0px;
    z-index:5;
}
.bottom{
    border: 1px solid #666666;
    font-size:16px;
    width:675px;
}

.text{
    margin:10px;
}

.moreInfo{
    text-align:right;
    margin:0 10px
}

.showen{display:block;}
.hidden{display:none;}

JavaScript

var wrap = document.getElementById("top");
var aDiv = wrap.getElementsByClassName("one")[0];
var bDiv = wrap.getElementsByClassName("two")[0];
var cDiv = wrap.getElementsByClassName("three")[0];
var dDiv = wrap.getElementsByClassName("four")[0];
var background = wrap.getElementsByClassName("background")[0];


aDiv.onmouseover = function() {
    background.style.backgroundPosition="0px -40px";
};
bDiv.onmouseover = function() {
    background.style.backgroundPosition="0px -80px";
};
cDiv.onmouseover = function() {
    background.style.backgroundPosition="0px -120px";
};
dDiv.onmouseover = function() {
    background.style.backgroundPosition="0px -160px";
};
aDiv.onmouseout = function() {
    background.style.backgroundPosition="0px 0px";
};
bDiv.onmouseout = function() {
    background.style.backgroundPosition="0px 0px";
};
cDiv.onmouseout = function() {
    background.style.backgroundPosition="0px 0px";
};
dDiv.onmouseout = function() {
    background.style.backgroundPosition="0px 0px";
};