JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div id="foo1">
		<a href="#foo1">click me</a>
		<p>
			Lorem ipsum dolor sit amet, <a href="http://ya.ru">another link</a> consectetur adipisicing elit, sed do eiusmod
		</p>
	</div>
	<div id="foo2">
		<a href="#foo2">click me</a>
		<p>
			Lorem ipsum dolor sit amet, <a href="http://ya.ru">another link</a> consectetur adipisicing elit, sed do eiusmod
		</p>
	</div>
	<div id="foo3">
		<a href="#foo3">click me</a>
		<p>
			Lorem ipsum dolor sit amet, <a href="http://ya.ru">another link</a> consectetur adipisicing elit, sed do eiusmod
		</p>
	</div>
	<div id="foo4">
		<a href="#foo4">click me</a>
		<p>
			Lorem ipsum dolor sit amet, <a href="http://ya.ru">another link</a> consectetur adipisicing elit, sed do eiusmod
		</p>
	</div>

CSS

* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 200px;
		min-height: 20px;
		background-color: #ebacca;
		margin: 20px;
		text-align: center;
	}
	div p {
		max-height: 0;
		overflow: hidden;
	}
	div:target {
		background-color: red;
	}
	div:target p {
		max-height: 999px;
		-webkit-transition: all 1s ease-in;
		-moz-transition: all 1s ease-in;
		-ms-transition: all 1s ease-in;
		-o-transition: all 1s ease-in;
		transition: all 1s ease-in;
	}