JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div class="accordion">
        <a href="#one">Link 1</a>
        <section id="one"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at est odio. Nam ut mi ut lectus adipiscing fringilla. Aliquam erat volutpat. Proin metus massa, condimentum non tincidunt ut, consequat sit amet mauris. Quisque quis eros eget risus ultricies euismod. Nunc quis nunc nec lectus aliquam dictum ac a justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pellentesque lacus sit amet mi porttitor sollicitudin.</p></section>
        <a href="#two">Link 2</a>
        <section id="two"><p>Praesent aliquet, est vel rhoncus faucibus, nisl est convallis dui, eget hendrerit mi nisl tempor velit. Cras sed tellus metus. Etiam molestie malesuada arcu, eu sollicitudin tellus malesuada ac. Mauris lacus sapien, euismod et fermentum at, condimentum sed mi. </p></section>
        <a href="#three">Link 3</a>
        <section id="three"><p>Suspendisse sit amet condimentum erat. Nulla in quam sed ipsum molestie dapibus. Donec enim urna, bibendum eget malesuada non, aliquet vel massa. Cras mauris tellus, congue ac imperdiet quis, blandit nec lectus. Donec orci tortor, lobortis in aliquet ac, varius ac erat. Pellentesque arcu leo, facilisis sit amet scelerisque nec, facilisis varius tellus.</p></section>
        <a href="#four">Link 4</a>
        <section id="four"><p>Fusce egestas ligula velit, ut auctor arcu. Sed et magna nec orci varius gravida. Pellentesque hendrerit sapien non justo malesuada vel adipiscing eros mattis. Mauris ut ante nec felis semper porta. Integer pulvinar, sem vel tempor laoreet, nunc nisl hendrerit nibh, at laoreet ligula dolor ac quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></section>
</div>

CSS

body {
    margin: 3em;
}

.accordion {
    overflow: hidden;
}

.accordion > * {
    box-sizing: border-box;
}

.accordion a {
    color: #000;
    text-decoration: none;
    display: block;
    width: 100%;
    float: left;
    margin: 0 3px 0 0;
    padding: 6px 20px;
    background: #eee;
}

.accordion section {
    height: 0;
    float:left;
    overflow: hidden;
    -webkit-transform: scale(0);
}

.accordion section p {
    padding: 20px;
}

.accordion section:target {
    height: auto;
    -webkit-transform: scale(1);
    -webkit-animation: slide 0.1s ease;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}