JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar1"><div id="butbg1"></div><div id="butbg2"></div><div id="butbg3"></div><div id="butbg4"></div>
 <ul id="mainmenu">
  <li><span class="but1">HOME.</span>
  </li>
    <li><span class="but2">PORTFOLIO.</span>
  </li>
    <li><span class="but3">WHAT I DO.</span>
  </li>
    <li><span class="but4">CONTACT ME.</span>
  </li>
   </ul>
   </div>

CSS

div#navbar1 {
	outline: 1px solid #000000;
	height: 92px;
	position:relative;
	}
ul#mainmenu {
	position:absolute;
	margin:0;
	padding:0;
	list-style-type: none;
	}

ul#mainmenu li {
	float:left;
	text-transform:uppercase;
	margin-left:98px;
	
	margin-top:33px;
   }
ul#mainmenu li span {
	position:relative;
	display:block;
	font-family: "helvetica condensed bold";
	font-size:25px;
	color:#5a3b3b;
	text-shadow: 1px 1px 2px #fff;
	cursor:pointer;
   }	

div#butbg1 {
	background:url(http://rghost.ru/52237180/thumb.png);
	width:160px;
	height:33px;
	position:absolute;
	left: 50px;
	top: 27px;
	}
	
div#butbg2 {
	background:url(http://rghost.ru/52237194/thumb.png);
	width:200px;
	height:33px;
	position:absolute;
	left: 225px;
	top: 27px;
	}	
div#butbg3 {
	background:url(http://rghost.ru/52237194/thumb.png);
	width:200px;
	height:33px;
	position:absolute;
	left: 447px;
	top: 27px;
	}	
	div#butbg4 {
	background:url(http://rghost.ru/52237217/thumb.png);
	width:220px;
	height:33px;
	position:absolute;
	left: 666px;
	top: 27px;
	}

JavaScript

$(document).ready(function() {

$('div#butbg1').hide();

$('span.but1').hover(function() {
$('div#butbg1').fadeIn(500);
});


$('div#butbg2').hide();

$('span.but2').hover(function() {
$('div#butbg2').fadeIn(500);
});


$('div#butbg3').hide();

$('span.but3').hover(function() {
$('div#butbg3').fadeIn(500);
});

$('div#butbg4').hide();

$('span.but4').hover(function() {
$('div#butbg4').fadeIn(500);
});




});