JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<a href="#contenido1">Contenido 1</a>
<a href="#contenido2">Contenido 2</a>
<a href="#contenido3">Contenido 3</a>
<a href="#contenido4">Contenido 4</a>
<a href="#contenido5">Contenido 5</a>

<div class="demo" id="contenido1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At porro vero dicta error perferendis est officiis. Laborum dicta magni animi, in adipisci at est. Alias voluptatibus itaque, nesciunt explicabo nulla.</div>
<div id="contenido2">odit quae ratione quas animi corporis quos, similique temporibus minus aliquam consequuntur doloribus reprehenderit numquam, modi dolore, quo sapiente quasi.</div>
<div id="contenido3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium incidunt nemo suscipit voluptatem totam est eveniet nulla repellendus molestias</div>
<div id="contenido4">Ex delectus illum doloribus ratione impedit ea illo officiis, consequatur</div>
<div id="contenido5">perspiciatis ab quis.</div>

CSS

a:active {
  background:#fe0;
}
div{
  width:0;
  height:0;
  overflow:hidden;
  transition:all 0.5s ease;
  box-sizing:border-box;
}
div:target{
  width: 100%;
  height: 150px;
  overflow: auto;
  padding: 15px;
  border: 1px #ccc solid;
}