JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<ul class="menu">
<div class="img1 left">
<li><a href="" id="thursButton" class="thursButton"></a>
    <p>Somewhere Only We Know Lily Allen<br>
Story Of My Life One Direction<br>
Of The Night Bastille<br>
Under Control Calvin Harris & Alesso Ft. Hurts<br>
Let Me Go Gary Barlow<br>
The Monster Eminem Ft. Rihanna<br>
How Long Will I Love You Ellie Goulding<br>
Hey Brother Avicii<br>
Animals Martin Garrix<br>
Do What U Want Lady Gaga & R Kelly</p>
</p></a><li>

<div class="img2 left">
<li><a href="" id="friButton" class="friButton"</a>
<p>Somewhere Only We Know Lily Allen<br>
Story Of My Life One Direction<br>
</p></a><li>

CSS

#nav {
    display:inline;
    list-style: none;
    position: fixed;
    width: 1290px;
    margin: 0 auto; 
    left:0px; 
    right:0px;
    float:clear;
    top: 120px;
    z-index: 1000;
 
}
.menu li {
    display: inline;
    vertical-align:top; 
    float:left;
    
}
.menu li a {
    display: block;
    height: 407px;
    width:250px;
    text-indent: -999999px;
}
.img1 {
    width: 250px;
    height: 407px;
    position: relative;
}
.thursButton {
    width:250px;
    height:177px;
    display:block;
}
#thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}
.thursButton:hover {
     background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}
.img2 {
    width: 250px;
    height: 407px;
    position: relative;
}
.friButton {
    width:250px;
    height:177px;
    display:block;
}
#friButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}
.friButton:hover {
     background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}
.left p {
    color: #FFFFFF;
    display: none;
    font-size: 18px;
    left: 10px;
    position: absolute;
    text-shadow: 1px 1px 1px #000000;
    top: 100px;
    width: 250px;
}
.left:hover p {
    
    display:block;
}