JSFiddle - React, Tailwind, and code Playground

by RussAbbott

HTML

<div id="tree-container">
    <ul>
        <li>0123456789abcdef
            <ul>
                <li>0123451234567
                    <ul>
                        <li>0123
                            <ul>
                                <li>01
                                    <ul>
                                        <li>0
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

/* Aesthetics*/
#tree-container {
    border: 0px;
    font-size: 20pt;
    margin: 20px; 
    padding: 0px;
}

ul {
    background: #fd4;
    background: -webkit-linear-gradient(315deg, #fc4, #fe3, #fc4);
    background: -moz-linear-gradient(315deg, #fc4, #fe3, #fc4);
    border: inset #da3;    
    box-shadow: 5px 10px 20px #000;
    cursor: default;
    list-type: none;
    padding: 4px;
    text-align: center;
}


li {
    border: outset #da3;    
    padding:1px 5px 1px 5px;
}



/* Tree effects */
ul {
    display: inline; 
    opacity: 0.4;
    position: absolute;
    -moz-transition: opacity 1s; 
    -webkit-transition:  opacity 1s; 
}

/* Always display the top level */
#tree-container > ul {
    opacity: 1;
}

/* Display additional levels when requested by hovering over the previous level*/
ul:hover > li > ul {
    opacity: 1;
}