JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mbody">
	<div class="resources">
		<ul>
			<li><a href="https://sussex.sharepoint.com/SitePages/Policies.aspx">Policies</a></li>
			<li><a href="https://sussex.sharepoint.com/SitePages/LMS.aspx">LMS</a></li>
			<li><a href="https://sussex.sharepoint.com/SitePages/Tips%20and%20Tricks.aspx">Tips & Tricks</a></li>
			<li><a href="https://sussex.sharepoint.com/SitePages/Forms.aspx">Forms</a></li>
		</ul>
	</div>
	<div id="mbg"></div>
</div>

CSS

.resources {
		width: 17%;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		z-index: 1;

		border-right: solid 1px #C5C5C5; 
		box-shadow: 2px 0px 2px -1px #DCDCDC;
	}
	.resources ul {
		text-align: right;
		padding: 0;
		margin: auto 0;
	}
	.resources ul > li {
		list-style-type: none;
		height: 65px;
		background: #00ADEF;

		border-bottom: solid #0088BC 1px;
		vertical-align: middle;
		overflow: hidden;
		padding: 0;

		box-shadow: 0px -1px 5px -2px #222 inset;

		transition: .5s;
	}
	.resources ul li:hover {
		list-style-type: none;
		height: 65px;
		background: linear-gradient(90deg, #00ADEF 90%, #8CC63E 5%);
		
		vertical-align: middle;
		overflow: hidden;

		/*transition: .5s;*/
	}
	.resources li a {
		line-height: 1em;
		text-decoration: none;
		color: white;
		font-size: 20px;
		font-weight: bold;
        box-sizing:content-box;
		display: block;
		padding: 1.13em;
	}
	#mbg {
		position: absolute;
		background-color: blue;
		width: 100%;
		height: 100vh;
		margin-left: 17%;
	}
	#layoutsTable {
		border: solid 1px #f08721;
		height: 100vh;
	}

JavaScript

$(document).ready(function() {
		$('li').eq(0).hover(
			function(){
				var $this = $('#mbg');
				$this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
			}
		); 
		$('li').eq(1).hover(
			function(){
				var $this = $('#mbg');
				$this.data('bgcolor', $this.css('background-color')).css('background-color', '#191919');
			}
		);
		$('li').eq(2).hover(
			function(){
				var $this = $('#mbg');
				$this.data('bgcolor', $this.css('background-color')).css('background-color', '#cbcbcb');
			}
		);
		$('li').eq(3).hover(
			function(){
				var $this = $('#mbg');
				$this.data('bgcolor', $this.css('background-color')).css('background-color', '#f08721');
			}
		);
		$('li').mouseout(
			function() {
				$('#mbg').css('background-color', 'blue');
			}
		);
	});