JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-container">
        <div class="menu-left">
            <ul id="menu-principal" class="menu">
                <li><a href="">Hola</a></li>
                <li><a href="">Hola2</a></li>
            </ul>
        </div>
    </div>

CSS

#menu-container {
	background: #F7F7F9;
	border-radius: 0;
	display: inline-block;
	width:100%;
	margin:0px;
}
.menu-left ul {
	margin: 0;
	padding:0;
	font-size: 17px; 
    width: 100%;
}
.menu-left ul li {
	display:inline-block;
	vertical-align: top;
	width: 30%;
}
.menu-left ul li a {
	color: #FFF;
	text-decoration:none;
	outline: none;
	padding: 15px 0;
	display: block;
	background: rgb(50,153,187);
	transition: all 1s ease;
    text-align:center;
}
.menu-left ul li a:active,
.menu-left ul li a:hover {
	background: rgba(50,153,187,0.8);
}