JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
        <nav>
            <header>Featured articles</header>
            <ul>
            	<li><a href="ColorKitchen.html#webColors">Web Colors</a></li>
            	<li><a href="ColorKitchen.html#webSafeColors">Web Safe Colors</a></li>
            	<li><a href="ColorKitchen.html#RGB">RGB Color Mode</a></li>
            	<li><a href="ColorKitchen.html#RGBA">RGBA Color Space</a></li>
            	<li><a href="ColorKitchen.html#HSLHSV">HSL adn HSV</a></li>
                <li><a href="ColorKitchen.html#lorem">Lorem Ipsum</a></li>
            </ul>
        </nav>
    </aside>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
width: 100%;
background-image: url(../images/colorful_dots_on_black.jpg);
background-repeat: repeat;
font-family: Calibri;
}

body > header:nth-child(1) {
width: 100%;
text-align: center;
color: yellow;
font-weight: bold;
font-size: 2em;
height: 40px;
background: linear-gradient(
to right,
red,
red 33.3%,
green 33.3%,
green 67.7%,
blue 67.7%);	
}

nav {
margin-top: 15px;
background: rgba(255, 255, 255, 0.9);
width: 15%;
height: inherit;
border-radius: 10px;
position: fixed;
}

nav header {
font-size: 1.2em;
text-decoration: underline;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}

nav ul {
padding-left: 35px;
list-style-image: url('../images/bullet02.png');
margin-top: 5px;
}

nav ul li {
line-height: 25px;
}

nav ul a {
text-decoration: none;
color: black;
}

nav ul a:visited {
color: grey;
}

nav ul li:nth-child(1):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: red;
border-radius: 5px;
list-style-position: inside;
}

nav ul li:nth-child(2):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: orange;
border-radius: 5px;
display: list-item;
list-style-position: inside;
}

nav ul li:nth-child(3):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: yellow;
border-radius: 5px;
display: list-item;
list-style-position: inside;
}

nav ul li:nth-child(4):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: green;
border-radius: 5px;
display: list-item;
list-style-position: inside;
}

nav ul li:nth-child(5):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: blue;
border-radius: 5px;
display: list-item;
list-style-position: inside;
}

nav ul li:nth-child(6):hover {
margin-left: -27px;
padding-left: 5px;
width: 110%;
background: purple;
border-radius: 5px;
display: list-item;
list-style-position: inside;
}