JSFiddle - React, Tailwind, and code Playground

by Varinder

HTML

<h6>Full width overlay (but side borders aren't visible anymore)</h6>
<div class="tree relative">
    <ul>
        <li>
            <div class="item">
                <div class="overlay"></div>
                <span class="relative">Node 1</span>
                
            </div>
            <ul>
                <li>
                    <div class="item selected">
                        <div class="overlay"></div>
                        <span class="relative">Node 2</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.relative {
    position:relative;
}

.tree { 
    width: 300px; 
    border: 1px solid #000; 
    padding: 10px; 
    margin-bottom: 15px; 
}

.tree ul { margin: 0; padding: 0; list-style-type: none; }
.tree ul li { padding-left: 16px; }

/*.tree li .item { position: relative; }*/

.tree li .item .overlay { 
    position: absolute; 
    left: 0; 
    right:0;
    /*
    top: 0; 
    width: 100%; 
    height: 100%;
    */
    height:26px; /* well, thats a bummer */
    background-color: #C5E7E6; 
    display: none; 
    border: 1px solid red; 
}
.tree li .item:hover .overlay { display: block; }