JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav_home" style="margin: 0;">
        <ul>
            <li class="nav_active">Заголовок</li>
            <li><a href="#">Тест1</a></li>
            <li><a href="#">Тест1</a></li>
            <li><a href="#">Тест1</a></li>
            <li><a href="#">Тест1</a></li>
            <li><a href="#">Тест1</a></li>
        </ul>    
</div>

CSS

body {padding: 50px;}
#nav_home {
        border: 0px solid #ccc;
        font-family: Trebuchet MS;
        font-size: 13px;
        width: 229px;
}
    
    #nav_home ul {
        list-style: none;
    }
    
    #nav_home li {
        display: block;
        text-align: left;
    }
    
    #nav_home li a {
        display: block;
        color: #333;
        background-repeat: no-repeat;
        background-position: right;
        background-color: #eee;
        text-decoration: none;
        padding: 10px 20px;
}

.nav_active {
        background: #333;
        background-repeat: no-repeat;
        color: #fff;
        position: relative;
    padding: 10px 20px;
}
.nav_active:before {
    display: block;
    position: absolute;
    content: '';
    left: -30px;
    top: 0;
    width: 30px;
    height: 36px;
    background: #333;
}

#nav_home li a:hover,
#nav_home li a:active,
#nav_home li a:focus {
    color: red;
}