JSFiddle - React, Tailwind, and code Playground

HTML

<div>	
		<nav>
			<ul>
				<div>
					<img src="img/logo2.png" width="100%">
				</div>
				<li><a href="index.php"><img src="img/home.png"> Home</a></li>
				<li><a href="?op=alta"><img src="img/alta.png">  Alta de Contacto</a></li>
				<li class="home"><a href="?op=baja">Baja de Contacto</a></li>
				<li><a  href="?op=cambios">Cambios de Contacto</a></li>
				<li><a  href="?op=consultas">Consultas de Contacto</a></li>
			</ul>
		</nav>
	</div>

CSS

ul {
	/* seccion menu lista */ 
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #D2EED4;
    position: fixed;
    height: 100%;
    overflow: auto;
}


li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    vertical-align: middle;
    text-align:center;
    margin:0;
    padding:0;
}
li a img{
  display:block;
  text-align:center;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}