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

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

    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 33.3%, green 33.3%, green 67.7%, blue 67.7%, blue 100%);
    }

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('bullet.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 {
            margin-left: -27px;
            padding-left: 5px;
            width: 110%;
            border-radius: 5px;
            list-style-position: inside;
        }

            nav ul li:nth-child(1):hover {
                background: red;
            }

            nav ul li:nth-child(2):hover {
                background: orange;
            }

            nav ul li:nth-child(3):hover {
                background: yellow;
            }

            nav ul li:nth-child(4):hover {
                background: green;
            }

            nav ul li:nth-child(5):hover {
                background: blue;
            }

            nav ul li:nth-child(6):hover {
                background: purple;
            }