JSFiddle - React, Tailwind, and code Playground

by mexicano21

HTML

<div class='spoiler'>
  <input type='checkbox' id='xis' class='spoiler'>
  <label for='xis'></label>
  <p class='spoiler-content'>
    Lorem ipsum dolor sit amet, consectetur adpisicing elit.
  </p>
</div>
<p>
  Lorem ipsum fora do spoiler.
</p>

CSS

div.spoiler {
	margin-bottom: 1.5em;
}

input[type='checkbox'].spoiler {
	display: none;
}

input[type='checkbox'].spoiler + label {
	background-color: #F27421;
	color: #FFF;
  cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	padding: 10px 30px;
	text-decoration: none;
	text-transform: uppercase;
	width: initial;
}

input[type='checkbox'].spoiler + label:hover {
	background-color: #3a3c41;
	color: #FFF;
	text-decoration: none;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

input[type='checkbox'].spoiler + label::before {
	content: 'Mostrar spoiler';
}

input[type='checkbox'].spoiler:checked + label::before {
	content: 'Ocultar spoiler';
}

input[type='checkbox'].spoiler + label + p {
	border-left: 5px solid #F27421;
	clear: both;
	display: none;
	font-style: italic;
	margin-top: 5px;
	padding-left: 10px;
}

input[type='checkbox'].spoiler:checked + label + p {
	display: block;
}