JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

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 one hidden">
            <p>
                Hi, I'm part 1! 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 two hidden">
            <p>
                Hi, I'm part 2! 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 three hidden">
            <p>
                Hi, I'm part 3! 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...

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
}

.hidden{display:none;}

JavaScript

function getByClass(className,no){
    var item = document.getElementsByClassName(className);
    return typeof no == 'number' && no >= 0 ? item[no] : item;
}
var background = getByClass("background",0);
function bgPos(px){
    background.style.backgroundPosition = "0px "+(px?px:0)+"px";
}
var classes = ['one','two','three','four'];
for (var i = 0; i < classes.length; i++){
    var elements = getByClass(classes[i]),
        menuItem = elements[0],
        text = elements[1];
    (function(menuItem,text){
        menuItem.onmouseover = bgPos(-(40+(i*20)));
        menuItem.onmouseout = bgPos();
        menuItem.onclick = function(){
            var texts = getByClass('text');
            for (var j = 0; j < texts.length; j++){
                if (texts[j].className.indexOf('hidden') == -1)
                    texts[j].className += ' hidden';
            }
            text.className = text.className.replace(/(\s?hidden|hidden\s?)/,'');
        }
    })(menuItem,text);
}