JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="tree-container">
            <ul>
                <li>1
                    <ul>
                        <li>1.1
                            <ul>
                                <li>1.1.1</li>
                                <li>1.1.2</li>
                                <li>1.1.3
                                   <ul>
                                        <li>1.1.3.1</li>
                                   </ul>
                                </li>
                                <li>1.1.4</li>
                            </ul>
                        </li>
                        <li>1.2
                            <ul>
                                <li>1.2.1</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </td>
        <td class="tree-container">
            2
        </td>
    </tr>
    <tr>
        <td class="tree-container">
            3
        </td>
        <td class="tree-container">
            <ul>
                <li>4
                    <ul>
                        <li>4.1
                            <ul>
                                <li>4.1.1</li>
                                <li>4.1.2
                                   <ul>
                                        <li>4.1.2.1</li>
                                   </ul>
                                </li>
                                <li>4.1.3</li>
                                <li>4.1.4</li>
                            </ul>
                        </li>
                        <li>4.2
                            <ul>
                                <li>4.2.1</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </td>
    </tr>

CSS

/* Basic settings */

table {
    margin:50px;
    background: #0df;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #0ac), color-stop(0.5, #0ef), color-stop(1, #0ac));
    background: -moz-gradient(linear, left top, right bottom, color-stop(0, #0ac), color-stop(0.5, #0ef), color-stop(1, #0ac));
    font-size: 24pt;
    text-align: center;
}

.tree-container {
    border: 1px solid;
    padding: 5px;
}

.tree-container li {
    padding:1px 10px 1px 10px;
}

/* Tree effects */

.tree-container ul {
/* The default is not to display any of the tree. */
    display: none;
    
/* But when displayed, these are its properties. */
    list-type: none;
    background:#ccc;
    background: -webkit-gradient(linear, right top, left bottom, 
                color-stop(0, #bbb), color-stop(0.5, #eee), color-stop(1, #bbb));
    font-size: smaller;
    -webkit-transition: box-shadow 0.5s; 
}

/* Always display the root */
.tree-container > ul {
    display: block;
}

/* Animate the root pop-up */
.tree-container > ul:hover {
    box-shadow: 4px 4px 7px #000;
}

/* Display additional levels when requested by hovering */
.tree-container li:hover > ul {
    display:block;
    position:absolute;
    border: 1px solid #000;    
    box-shadow: 4px 4px 7px #000;
/* This transition seems to have no effect. */
    transition: box-shadow 0.5s;
}