JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li>Lorem ipsum
		<div>
			<p>Titre</p>
			<p>Texte blablabla blabla</p>
		</div>
	</li>
	<li>Lorem ipsum
		<div>
			<p>Titre</p>
			<p>Texte blablabla blabla</p>
		</div>
	</li>
	<li>Lorem ipsum
		<div>
			<p>Titre</p>
			<p>Texte blablabla blabla</p>
		</div>
	</li>
	<li>Lorem ipsum
		<div>
			<p>Titre</p>
			<p>Texte blablabla blabla</p>
		</div>
	</li>
	<li>Lorem ipsum
		<div>
			<p>Titre</p>
			<p>Texte blablabla blabla</p>
		</div>
	</li>
</ul>

CSS

ul {float:right;width:200px;list-style:none;}
li {position:relative;padding-left:25px;border-bottom:1px solid #fff;font:100%/40px sans-serif;color:#fff;background:#2175BF;cursor:pointer;transition:all .4s;}
li:hover {background:#00ADEF;}
div {position:absolute;width:300px;height:200px;top:-9999px;right:100%;border:5px solid #00ADEF;border-top:none;border-bottom:none;opacity:0;transition:opacity .4s;}
li:hover div {top:-20px;opacity:1;}
p:first-child {font-size:200%;}
p {margin:0;color:#000;}