JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banners">
			<div class="tab" id="item-1">
				<span>First item</span>
				<div class="content">
					First Content
				</div>
			</div>
			<div class="tab" id="item-2">
				<span>Second item</span>
				<div class="content">
					Second Content
				</div>
			</div>
			<div class="tab" id="item-3">
				<span>Third item</span>
				<div class="content">
					Third Content
				</div>
			</div>
			<div class="tab" id="item-4">
				<span>Fourth item</span>
				<div class="content">
					Fourth Content
				</div>
			</div>
			<div class="tab" id="item-5">
				<span>Fifth item</span>
				<div class="content">
					Fifth Content
				</div>
			</div>
		</div>

CSS

#banners {width: 600px; height: 250px; background-color: #ccc; position: relative;}
#banners .tab {left: 500px; height: 50px; width: 100px; background-color: #000; position: relative;}
#banners .tab span {display: inline-block; width: 100%; height: 100%; cursor: pointer;}
#banners .tab .content {right: 100%; position: absolute; width: 500px; height: 250px;}
#banners .tab#item-1 {background-color: blue;}
#banners .tab#item-2 {background-color: green;}
#banners .tab#item-3 {background-color: red;}
#banners .tab#item-4 {background-color: purple;}
#banners .tab#item-5 {background-color: orange;}
#banners .tab#item-1 .content {background-color: blue; top: -0px; z-index: 10;}
#banners .tab#item-2 .content {background-color: green; top: -50px;}
#banners .tab#item-3 .content {background-color: red; top: -100px;}
#banners .tab#item-4 .content {background-color: purple; top: -150px;}
#banners .tab#item-5 .content {background-color: orange; top: -200px;}
#banners .tab:hover .content {z-index: 20;}