JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
    <div>
        <input id="test1" name="acctest" type="radio" checked />
        <label for="test1">About us</label>
        <ul>
            <li>test</li>
            <li>test2</li>
        </ul>
    </div>
    <div>
        <input id="test2" name="acctest" type="radio" />
        <label for="test2">About us</label>
        <ul>
            <li>test</li>
            <li>test2</li>
        </ul>
    </div>
</section>

CSS

.container ul{
	background: rgba(255, 255, 255, 0.5);
	margin: 0px;
	overflow: hidden;
	height: 0px;
	position: relative;
    margin: 0;
	z-index: 1;
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;}
.container li{
    height: 25px;
    color: #000;
    font-size: 12px;}
.container input:checked ~ ul{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    max-height: 50px;}