JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
	<div id="contents">
		<div class="content active" id="content-1" data-slide="1"></div>
		<div class="content" id="content-2" data-slide="2"></div>
		<div class="content" id="content-3" data-slide="3"></div>
		<div class="content" id="content-4" data-slide="4"></div>
		<div class="content" id="content-5" data-slide="5"></div>				
	</div>
	<div id="tabs">
		<div class="tab active" id="item-1" data-slide="1"></div>
		<div class="tab" id="item-2" data-slide="2"></div>
		<div class="tab" id="item-3" data-slide="3"></div>
		<div class="tab" id="item-4" data-slide="4"></div>
		<div class="tab" id="item-5" data-slide="5"></div>
	</div>
</div>

CSS

#banner {width: 600px; height: 250px; background-color: #ccc;}
#banner #contents {width: 500px; height: 250px; float: left;}
#banner #tabs {width: 100px; height: 250; float: left;}
#banner #tabs .tab{height: 50px;}

#banner #tabs .active {outline: solid 1px black}

#banner #tabs .tab#item-1 {background-color: blue;}
#banner #tabs .tab#item-2 {background-color: green;}
#banner #tabs .tab#item-3 {background-color: red;}
#banner #tabs .tab#item-4 {background-color: purple;}
#banner #tabs .tab#item-5 {background-color: orange;}

#banner .content {width: 500px; height: 250px; display: none;}
#banner .content.active {display: block;}

#banner #contents .content#content-1 {background-color: blue;}
#banner #contents .content#content-2 {background-color: green;}
#banner #contents .content#content-3 {background-color: red;}
#banner #contents .content#content-4 {background-color: purple;}
#banner #contents .content#content-5 {background-color: orange;}

JavaScript

$(function() {
    $('#tabs .tab').on('mouseover', function() {
        $('#banner .active').removeClass('active');
        $('#contents .content[data-slide=' + $(this).data('slide') + ']').addClass('active');
        $(this).addClass('active');
    });
});