JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "header-menu">
  <div class ="pull-left">
   <ul>
   <li><a data-image-id='1' class="navigation" href="index.html">Home</a></li>
  <li><a data-image-id='2' class="navigation" href="index.html">About</a></li>
  <li><a data-image-id='3' class="navigation" href="index.html">Rules</a></li>
  </ul>
  </div>
  <div class = "pull-right">
  <ul>
  <li><a data-image-id='4' class="navigation" href="login.html">Log In </a></li>
  <li><a data-image-id='5' class="navigation" href="signup.html">Sign Up</a></li>
  </ul>
  </div>
  <div class = "logo-header">
  <center><a href = "index.html"><img src = "images/logo.png" ></a></center>
  </div>
  </div>

 <div id="nav-tv">
 </div>

CSS

html, body {
    height: 100%;
    width: 100%;
} 

.header-menu{
height:95px;
width:100%;
color:black;
height:100px;
position:relative;
background-color:black;
overflow: hidden;
}

.header ul {
    padding-top:35px;
  }
 .header-menu li {
   display: inline;
   margin :20px;
  }

.pull-left{
    padding-top:35px;
    margin-top:0px;
    float: left;
    width = 33.3%;
 }

.logo-header{
     margin-top:15px;
     position:absolute;
     width:220px;
     border: 1px solid black;
     margin-left:570px;
     margin-right:500px;
     width = 33.3%;
     }

 .pull-right{
    padding-top:35px;
    width = 33.3%;
    float :right;
   }

#nav-tv{
width:100%;
height:350px !important;
border:1px solid black;
background-image: url('images/2.jpg');
background-repeat: no-repeat;
background-size: cover;
}

JavaScript

(function() {
    var images = {
   "1": "http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg",
   "2": "http://36nukx10904q2nqzfr2ammzk.wpengine.netdna-cdn.com/wp-content/uploads/2012/11/bigcompany.jpg",
   "3": "http://monevator.monevator.netdna-cdn.com/wp-content/uploads/2008/12/small-cap-fireworks.jpg",
   "4": "http://www.indiaonrent.com/forwards/e/enjoy-a-ride-in-small-cars-so-cute/res/0gqbu1.jpg",
   "5": "http://www.smallarmssurvey.org/uploads/tx_rgslideshow/sas-homepage-armed-violence.jpg"
};
    var navTv = document.getElementById('nav-tv');
    var arr = document.getElementsByClassName('navigation');
    for(var i=0; i<arr.length; i++) {
    	arr[i].onmouseover = function(e) {
            var a = e.target;
            var imgId = a.getAttribute('data-image-id');
            var imgSrc = images[imgId];
            var style = ['background-image: url(', imgSrc, ');'].join('');
            navTv.setAttribute('style', style);
        }
    }
})();