JSFiddle - React, Tailwind, and code Playground

HTML

<div class="link-with-popup">
		<div class="link">HTML</div>
		<div class="popup">
			<div class="box">HTML Description</div>
		</div>
	</div>
	
	<div class="link-with-popup">
		<div class="link">CSS</div>
		<div class="popup">
			<div class="box">CSS Description</div>
		</div>
	</div>
	
	<div class="link-with-popup">
		<div class="link">JavaScript</div>
		<div class="popup">
			<div class="box">JavaScript Description</div>
		</div>
	</div>
	
	<div class="link-with-popup">
		<div class="link">jQuery</div>
		<div class="popup">
			<div class="box">jQuery Description</div>
		</div>
	</div>

CSS

.link-with-popup {
			position: relative;
			z-index: 100;
			margin-bottom: 10px;
			font: normal 11px tahoma;
		}
		
		.link-with-popup:hover {
			z-index: 200;
     
		}
		
		.link {
			/* stylish design */
			background: #E0EAF1;
			padding: 10px 0;
			width: 100px;
			text-align: center;
			cursor: pointer;
		}
		
		.link:hover {
			background: #c4dae9;
		}
		
		.link:active + .popup {
			display: block;

		}
		
		.popup {
			position: absolute;
             background: #f0f2f5;
			top: 0;
			left: 0;
			width: 400px;
			bottom: 0;
			display: none;
		}
		
		.popup:hover {
			display: block;
		}
		
		.popup .box {
			position: absolute;
			top: 0;
			left: 130px;
			right: 0;
			bottom: 0;
			background: #505050;
			color: #fff;
			padding: 10px 20px;
		}