JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<body style="background:grey;">

<div id="tabFolder1" class="itemPosition" role="presentation" style="height: 40px;  user-select: none;">
            <div class="sideButton"></div>
            <div class="iconText" style="width: 215px">
            <a href='#tabFolder1' style="color:white;">BUTTON 1</a>
            </div>
            </div>



<div id="tabFolder2" class="itemPosition" role="presentation" style="height: 40px;  user-select: none;">
            <div class="sideButton"></div>
            <div class="iconText" style="width: 215px">
            <a href='#tabFolder2' style="color:white;">BUTTON 2</a>
            </div>
            </div>
           
</body>

CSS

/*** Here guys ***/
.sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}

#tabFolder1:target .sideButton,
#tabFolder2:target .sideButton {background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}



#tabFolder1,#tabFolder2{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;}
#tabFolder1:hover,#tabFolder2:hover{background-color:rgba(255,255,255,0.1)}
#tabFolder1:target, #tabFolder2:target {background-color:rgba(29, 33, 41, 1)}

.itemPosition{align-items:center;display:flex}

.5bme .sideFolder{background-color:#066cd2}
.iconText:hover .1i5y,.uiPopover.selected .1i5y{display:block}
.iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}