JSFiddle - React, Tailwind, and code Playground

HTML

<div id="showwrap">
			<div id="leftbox">
				<ul>
					<li id="a">
						<a href="">
						</a>
					</li>
				</ul>				
			</div>
			<div id="rightbox">
				<ul>
					<li id="b">
						<a href="">
							Firstname Lastname
						</a>
					</li>
				</ul>
			</div>
		</div>

CSS

#showwrap {
		position: relative;
		border: 0px solid black;
		width: 555px;
		height: 888px;
		top: 77px;
		margin:0 auto;
	}
	#leftbox {
		float: left;
		position: relative;
		width: 360px;
		height: 120px;
		border: 0px solid #a1a1a1;
	}
	#rightbox {
		float: right;
		position: relative;
		width: 177px;
		height: 120px;
		border: 0px solid #a1a1a1;
	}
	#a {
	    left: -40px;
	    top: -15px;
		display: inline-block;
		position: relative;
		float: left;
		margin-left: 7px;
	}
	#a a {
		display: block;
		top: 8px;
		left: 1px;
		width: 100px;
		height: 100px;
		position: relative;
		border: 1px solid #a1a1a1;
	}
	#b a {
		text-decoration: none;
		text-align: center;
		display: inline-block;
		margin-top: 4px;
		width: auto;
		position: relative;
		font-family: "Open Sans", "Tahoma";
		font-size: 12px;
		color: #a1a1a1;
		font-weight: 300;
	}
	#b {
		position: relative;
		margin: 0 auto;
		display: inline-block;
	}
	#a a:hover {
		box-shadow: 2px 3px;
	}

JavaScript

$('#a').hover(function(){
  $('#a').css('box-shadow','1px 3px');
  $('#b').css('color','blue');
}, function(){
  $('#a').css('box-shadow','none');
  $('#b').css('color','red');
})

$('#b').hover(function(){
  $('#a').css('box-shadow','1px 3px');
  $('#b').css('color','blue');
}, function(){
  $('#a').css('box-shadow','none');
  $('#b').css('color','red');
})