JSFiddle - React, Tailwind, and code Playground

by Yauheni Pakala

HTML

<div class="container">
	<ul class="accordion">
		<li>
			<a href="#first" class="accordion-header">First</a>
			<div class="accordion-content" id="first">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex veritatis quod reiciendis et dicta. In, voluptas quos accusamus quibusdam deleniti dicta consectetur perferendis vel. Esse provident obcaecati vel veniam vitae voluptatum nam veritatis aut aliquam quibusdam, officia dolorem, ut, accusamus eius consequuntur porro optio temporibus nesciunt minus. Eius dolore nisi, amet dolorem nihil quis ut error blanditiis iusto libero perferendis sequi ducimus autem modi consectetur animi cumque tenetur illo, cum delectus nulla. Vitae quibusdam quae nesciunt, fuga tenetur! Maiores quae veritatis provident expedita pariatur quaerat obcaecati explicabo aut facere dignissimos, non necessitatibus quam facilis, tenetur modi aliquid voluptatem eum eius.</p>
			</div>
		</li>
		<li>
			<a href="#second" class="accordion-header">Second</a>
			<div class="accordion-content" id="second">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex veritatis quod reiciendis et dicta. In, voluptas quos accusamus quibusdam deleniti dicta consectetur perferendis vel. Esse provident obcaecati vel veniam vitae voluptatum nam veritatis aut aliquam quibusdam, officia dolorem, ut, accusamus eius consequuntur porro optio temporibus nesciunt minus. Eius dolore nisi, amet dolorem nihil quis ut error blanditiis iusto libero perferendis sequi ducimus autem modi consectetur animi cumque tenetur illo, cum delectus nulla. Vitae quibusdam quae nesciunt, fuga tenetur! Maiores quae veritatis provident expedita pariatur quaerat obcaecati explicabo aut facere dignissimos, non necessitatibus quam facilis, tenetur modi aliquid voluptatem eum eius.</p>
			</div>
		</li>
		<li>
			<a href="#third" class="accordion-header">Third</a>
			<div class="accordion-content" id="third">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing...

CSS

body {
	font-family: 'Oswald', sans-serif;
}
.container {
	width: 100%;
	max-width: 400px;
	border: 1px solid #ccc;
}
.accordion {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.accordion-header {
	display: block;
	padding: 12px 20px;
	background-color: #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 p {
	margin: 20px;
}
.accordion-content {
	padding: 0;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 400ms ease;
	transition: height 400ms ease;
}
.accordion-content:target {
	height: 150px;
	padding: 20px;
}