JSFiddle - React, Tailwind, and code Playground

HTML

<nav>

<ul>
    <li>
    <a href="#">
      <div class="item-container">
        
        <div class="item-top">The Song</div>
        <div class="item-bottom-song-content">The Song</div>
        <div class="item-bottom-song">Have a Listen</div>
        
      </div>
      </a>
    </li>
    <li>
    <a href="#">
      <div class="item-container">
        <div class="item-top">The Project</div>
        <div class="item-bottom-project-content">The Project</div>
        <div class="item-bottom-project">Help</div>
      </div>
      </a>
    </li>
    <li>
    <a href="#">
      <div class="item-container">
        <div class="item-top">Behind the Scenes</div>
        <div class="item-bottom-behind-content">Behind the Scenes</div>
        <div class="item-bottom-behind">Take a Peek</div>
      </div>
      </a>
    </li>
    <li>
    <a href="#">
      <div class="item-container">
        <div class="item-top">What's</div>
        <div class="item-bottom-batten-content">What's</div>
        <div class="item-bottom-batten">Learn More</div>
      </div>
    </li>
    </a>
    <li>
    <a href="#">
      <div class="item-container">
        <div class="item-top">About</div>
        <div class="item-bottom-about-content">About</div>
        <div class="item-bottom-about">Get Acquainted</div>
      </div>
      </a>
    </li>
    <li>
    <a href="#">
      <div class="item-container">
        <div class="item-top">Sharing is Caring</div>
        <div class="item-bottom-sharing-content">Sharing is Caring</div>
        <div class="item-bottom-sharing">Join the Chatter</div>
      </div>
      </a>
    </li>
  </ul>

</nav>

CSS

html {
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html, body {
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/
body {
	margin: 0;
	background: #000e22;
}

dl, menu, ol, ul {
	margin: 1em 0
}
dd {
	margin: 0 0 0 40px
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu, ol, ul {
	padding: 0
}
nav ul, nav ol {
	list-style: none;
	list-style-image: none;
}

nav {
	width: 100%;
	margin: 0;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	height: 225px;
	z-index: 999999;
}
nav ul {
	height: 225px;
	overflow: hidden;
}
nav ul li {
	width: 16.65%;
	float: left;
	text-align: center;
	line-height: 225px;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
}
nav ul li a {
	font-family: 'DINWeb-CondBold';
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
}
.item-container {
	top: 0;
	position: relative;
	height: 225px;
	line-height: 300px;
	cursor: pointer;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.item-container:hover {
	top: -225px;
	-webkit-transition: all 0.2s ease-in-out 200ms;
	-moz-transition: all 0.2s ease-in-out 200ms;
	-o-transition: all 0.2s ease-in-out 200ms;
	transition: all 0.2s ease-in-out 200ms;
}
.item-top, .item-bottom {
	height: 225px;
	position: relative;
}
.item-bottom-song-content {
	height: 50px;
	position: absolute;
	color: #fff;
	background: #333;
	z-index: 99;
	width: 100%;
	line-height: 50px;
}
.item-bottom-project-content {
	height: 50px;
	position: absolute;
	color: #fff;
	background: #51338f;
	z-index: 99;
	width: 100%;
	line-height: 50px;
}
.item-bottom-behind-content {
	height: 50px;
	position:...