JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion">
    <li id="first">
        <a href="#first">First item</a>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dui ut dolor ultricies, sit amet cursus nibh convallis. Aenean et ligula sodales, ultricies turpis in, suscipit urna. Ut bibendum massa ut nulla pulvinar, ut laoreet turpis faucibus.</p>
        </div>
    </li>
    <li id="second">
        <a href="#second">Second item</a>
        <div class="content">
            <p>Cras vitae quam pharetra, euismod sem vel, suscipit nibh. Cras porta ultrices nisl a malesuada.</p>
        </div>
    </li>
    <li id="third">
        <a href="#third">Third item</a>
        <div class="content">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et interdum dui. Mauris in nisi nisi.</p>
        </div>
    </li>
</ul>

CSS

.accordion {
    width: 400px;
    list-style-type: none;
    border: 10px solid #666;
    padding: 2px 2px 0;
}

li {
    background-color: #4a4;
    border: 2px solid #333;
    padding: 10px;
    display: block;
    position: relative;
    overflow: auto;
    margin-bottom: 2px;
    
    -moz-transition: 0.6s background;
    transition: 0.6s background;
}

li:target {
    background-color: #7c7;
}

a, a:visited {
    font-size: large;
    text-decoration: none;
    color: black;
    font-weight: bold;
    display: block;
}

.content {
    height: 0;
    overflow: hidden;
    
    -moz-transition: 0.6s height;
    transition: 0.6s height;
}

li:target .content {
    height: 250px;
}