JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li><a href="">Bienvenue</a></li><!--
 --><li><a href="">Actualités</a></li><!--
 --><li><a href="">Vie municipale</a></li><!--
 --><li><a href="">Vie communale</a></li><!--
 --><li><a href="">Vie culturelle</a></li>
</ul>

CSS

ul {min-width: 630px;margin-top:50px;}
li {position:relative;display:inline-block;vertical-align:bottom;margin-top:40px;border-right:1px solid #736B68;background:#DCC69D;}
li:first-child {border-left:1px solid #736B68;}
li:first-child:before {background:#839130 url(https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png) no-repeat;background-position:50% 20%;background-size:30px 30px;}
li:before {content:"";position:absolute;width:100%;height:0;bottom:0;left:0;background-color:#839130;z-index:-1;transition:all .4s;}
a {display:block;padding:10px 20px;text-decoration:none;color:#807466;transition:all .3s;}
li:hover:before {height:250%;}
li:hover a {color:#fff;background:#839130;}