JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ex300x250">
		<li>
			<h1>Head1</h1>
			<p class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque magna eget nisi tincidunt, non adipiscing mi imperdiet. Quisque volutpat.</p>
		</li>
		<li class="default">
			<h1>Head2</h1>
			<p class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque magna eget nisi tincidunt, non adipiscing mi imperdiet. Quisque volutpat.</p>
		</li>
		<li>
			<h1>Head3</h1>
			<p class="detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque magna eget nisi tincidunt, non adipiscing mi imperdiet. Quisque volutpat.</p>
		</li>
	</ul>

CSS

body{ padding:0;margin:0; }
h1{margin:0;font-size:20px;}
p{ margin:0}
ul.ex300x250{width:300px;height:250px; padding:0; margin:0;}
ul.ex300x250 > li{ 
padding:5px ; margin:0px; list-style:none; height:40px; background-color:#CCC; overflow:hidden;
transition: height 0.3s linear 0s;
}
ul.ex300x250 > li:hover,
ul.ex300x250:not(:hover) > .default
{
height:140px;background-color:#FFF;
transition: height 0.3s linear 0s;
}
ul.ex300x250 > li > .detail{ opacity:0; }
ul.ex300x250 > li:hover > .detail,
ul.ex300x250:not(:hover) > li.default > .detail
{ opacity:1; }