JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">    
        <nav id="accordion">
            <ol>
                <li id="item-1"><a href="#item-1"><span>Menu Item 1<span></a>
                    <ol>
                        <li>Sub Menu Item 1.1</li>
                        <li>Sub Menu Item 1.2</li>
                        <li>Sub Menu Item 1.3</li>
                        <li>Sub Menu Item 1.4</li>
                        <li>Sub Menu Item 1.5</li>
                        <li>Sub Menu Item 1.6</li>
                    </ol>
                </li>
                <li id="item-2"><a href="#item-2"><span>Menu Item 2<span></a>
                    <ol>
                        <li>Sub Menu Item 2.1</li>
                        <li>Sub Menu Item 2.2</li>
                        <li>Sub Menu Item 2.3</li>
                    </ol>
                </li>
                <li id="item-3"><a href="#item-3"><span>Menu Item 3<span></a>
                    <ol>
                         <li id="item-3.1"><a href="#item-3.1"><span>Menu Item 3.1<span></a>
                            <ol>
                            <li>Sub Menu Item 3.1.1</li>
                            <li>Sub Menu Item 3.1.2</li>
                            </ol>
                        <li>Sub Menu Item 3.2</li>
                        <li>Sub Menu Item 3.3</li>
                    </ol>
                </li>
            </ol>
        </

CSS

#accordion ol {
        list-style: none;
        border: 1px solid #cccccc;
        margin: 0px;
        padding: 0px;}
    #accordion ol li {
        height: 20px;
        border-bottom: 1px solid #cccccc;
        transition: height 1s ease-in-out;
        -webkit-transition: height 1s ease-in;
        -moz-transition: height 1s ease-in;
        -ms-transition: height 1s ease-in;
        -o-transition: height 1s ease-in;    
        overflow: hidden;}
    #accordion ol li ol:last-child {
        border-bottom: 0px;}
    #accordion ol li:target {
        height: 100px;}
    #accordion ol li ol{
        opacity: 0;
        padding-left: 10px;
        padding-right: 10px;
        border: 0px;
        max-width: 100%;
        max-height: 80px;
        overflow-y: auto;
        transition: all 1s ease-in;
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;}
    #accordion ol li:target ol{
        opacity: 1; }