JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navlist"> 
        <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>
    </div>

CSS

.navlist {
	background: #404c3f;
	background: -moz-linear-gradient(top,  #404c3f 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404c3f), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top,  #404c3f 0%,#000000 100%);
	background: -o-linear-gradient(top,  #404c3f 0%,#000000 100%);
	background: -ms-linear-gradient(top,  #404c3f 0%,#000000 100%);
	background: linear-gradient(to bottom,  #404c3f 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404c3f', endColorstr='#000000',GradientType=0 );
	width: 100%;
	text-align:center;
}

.navlist ul {
	margin: 0;
	padding: 0;
	display:block;
}

.navlist ul li {
	display:inline-block;
	padding:0;
}

.navlist li {
	background:url(http://80.217.81.130/Website/images/Separator.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding:0;
}

.navlist ul li a {
	text-decoration: none;
	color: #3f473f; 
	padding: 10px 30px;
	display:inline-block;
	font-family:myFont;
	font-size:30px;
}

.navlist ul li a:hover {
	color: #627062;
}