JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"></div>
	<ul class="accordion">
	<li>
		<a href="#first" class="accordion-header">First</a>
		<div class="accordion-content" id="first">
		<p>Bonjour</p></div>
		</li>
		
		<li>
		<a href="#second" class="accordion-header">Second</a>
		<div class="accordion-content" id="second">
			<p>Hello</p></div>
		</li>
		
		
		<li>
		<a href="#third" class="accordion-header">Third</a>
		<div class="accordion-content" id="third">
			<p>No</p></div>
		</li>
	</ul>

CSS

body{
font: 1em 'Source Sans Pro', sans-serif;
}

.container{
width:100%;
	max-width: 400px;
}

.accordion{
width: 100%;
padding:0;
	margin:0;
	list-style-type: none;
}

.accordion-header{
	display: block;
	padding: 15px 20px;
	background: #bbb;
	color:#fff;
	text-decoration: none;
	font-size: 1.2em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
	margin-bottom: 5px;
}

.accordion-content{
	
	height: 0;
	overflow: hidden;
	-webkit-transition:height 400ms ease;
	transition:height 400ms ease;
}

.accordion-content p{
	margin: 20px;

}

.accordion-content:target{
	height:150px;
	overflow-y: scroll;
}