JSFiddle - React, Tailwind, and code Playground

HTML

<div style='padding:10px;border:2px solid red'>
    <ul class="list_items">
        <li id='llist'><a href='#' id='list'>List</a>

        </li>
        <li id='lgroups'><a href='#' id='groups'>Groups</a>

        </li>
        <li id='lprofile'><a href='#' id='profile'>Profile</a>

        </li>
        <li id='linvitations'><a href='#' id='invitations'>Invitations</a>

        </li>
    </ul>
    	<h5 style='color: white'>PROJECTS</h5>

    <ul class="list_items">
        <li id='lsummary'><a href='#' id='summary'>Summary</a>

        </li>
        <li id='ltrack'><a href='#' id='track'>Track</a>

        </li>
        <li id='lmanage'><a href='#' id='manage'>Manage</a>

        </li>
        <li id='lexport'><a href='#' id='export'>Export</a>

        </li>
    </ul>
    	<h5 style='color: white'>ANALYSIS</h5>

    <ul class="list_items">
        <li id='lanalyse'><a href='#' id='analyse'>Analyse</a>

        </li>
        <li id='lviewall'><a href='#' id='viewall'>ViewAll</a>

        </li>
        <li id='lexport'><a href='#' id='export'>Export</a>

        </li>
    </ul>
    	<h5 style='color: white'>SETTINGS</h5>

    <ul class="list_items">
        <li id='lusers'><a href='#' id='users'>Users</a>

        </li>
        <li id='larchive'><a href='#' id='archive'>Archive</a>

        </li>
        <li id='lsystem'><a href='#' id='system'>System</a>

        </li>
        <li id='lmyprofile'><a href='#' id='myprofile'>My Profile</a>

        </li>
    </ul>
</div>

CSS

ul {
    list-style-type: none;
}
li {
    margin-bottom:5px;
    width:100px;
}
ul li a {
    text-decoration:none;
    color:black;
}
ul.list_items li:hover {
    margin-left:10px;
    color:white;
    background-color:red;
}