JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul>
        <li><div class="fakeimg1"></div></li>
        <li class="active"><div class="fakeimg2"></div></li>
        <li><div class="fakeimg3"></div></li>
    </ul>
</div>

CSS

.container {
    width: 42px;
}

.fakeimg1, .fakeimg2, .fakeimg3 {
    background-color: red;
    height: 40px;
    width: 40px;
}

ul {
    border: 1px solid #b0b0b0;
    list-style-type: none;
    padding: 0; 
}

ul li {
    display: block;
    height: 40px;
    width: 40px; }

ul li:not(:first-child) {
    border-top: 1px solid #b0b0b0; 
}
ul > li.active {        
    box-shadow:5px 0 yellow inset;
}
ul > li.active > * {
    position:relative;
    z-index:-3;
}