JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li><a href="#">test1</a></li>
	<li><a href="#">test2</a></li>
	<li><a href="#">test3</a></li>
	<li><a href="#">test4</a></li>
</ul>

CSS

ul {
    /* padding: 0;
    margin: 0;
    list-style: none; */
    /* use this to remove the list-style-type, padding and margin set to 0 removes the user agents default styling */
}

li {
    background-color: grey;
    height: 30px;
    margin: 5px 0 0; /* this styles top left/right bottom */
    width: 100px;
    /* display: inline-block; */
    /* use the display: inline-block for horizontal nav or you can float but need to use a clearfix on the parent to avoid flow issues. */
}

li:first-child { /* :first-child is support in IE8, last-child I believe didn't make the CSS2.1 spec or was added in the 3rd edition. */
    margin-top: 0; 
}

a {
    color: black;
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    transition: color .3s ease-out;
}

a:hover {
    color: red;
}