JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div id="outside">
    <div class="context-menu-wrapper">
        <div class="triangle-wrapper">
            <div class="triangle"></div>
        </div>
        <div class="context-menu">
            <div class="menu-wrapper">
                <div class="menu">
                    <div class="menu-items">
                        <div class="menu-item">
                            <div class="item">Snap Off Rails</div>
                        </div>
                        <div class="sub-menu-wrapper">
                            <div class="sub-menu"> <span>Sub Panel</span>

                                <div>
                                    <div class="menu-wrapper">
                                        <div class="menu">
                                            <div class="menu-items">
                                                <div class="menu-item">
                                                    <div class="item">Sub Item 1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> <span class="context-menu-chevron">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.101 21" width="14.9" height="10"><g><path fill="#020202"
                                d="M14.101 10.5l-10.501-10.5-3.6 3.7 6.801 6.8-6.801 6.8 3.6 3.7z"></path></g>
                            </svg>
                       </span>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

#outside {
    font-size: 14pt;
}

.animate{
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.context-menu-wrapper {
    position: absolute;
    width: auto;
    top: 15px;
    left: 30px;
    
    .triangle-wrapper {
        z-index: -10;
        position: absolute;
        top: 4px;
        left: -4px;
        .triangle {
            height: 8px;
            width: 8px;
            background: white;
            border: solid 1px black;
            -webkit-transform: rotate(45deg);
        }
    }
    
    .context-menu {
        position: relative;

        .menu {
            top: 0;
            left: 100%;
            position: absolute;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            white-space: nowrap;
            
            .menu-items {
                
                background: white;
                border: solid 1px black;
                .menu-item, .sub-menu {
                    padding: 10px;
                    &:hover {
                        cursor: pointer;
                        background: orange;
                    }
                }
                
                .menu-item{
                    position: relative;
                    height: 100%;
                }
                
                .sub-menu-wrapper {
                    position: relative;
                    
                    .sub-menu{
                        > div {
                            display: inline;
                        }
                        .context-menu-chevron {
                            padding: 10px;
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                        .menu-wrapper{
                            .animate;
                            opacity: 0;
                        }
                        &:hover{
...