JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-menu">
  <ul>
    <li class="home"><a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a> </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">One more Item</a></li>
    <li><a href="#">Another Item</a></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

body { margin: 0; }                     /* 1 */

nav {
  height: 40px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

ul {
    display: flex;
    justify-content: space-between;      /* 2 */
    align-items: center;                 /* 2 */
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

li:not(.home) {
    flex: 1;                              /* 3 */
    height: 100%;
    border: 1px dashed red;               /* 4 */
    background-color: lightgreen;         /* 4 */
}

li:not(.home) > a {                       /* 5 */
    display: flex;                    
    justify-content: center;
    align-items: center;
    height: 100%;
}

li img { vertical-align: bottom; }         /* 6 */

li { position: relative; }                 /* 7 */

li:not(.home):not(:last-child)::before {   /* 8 */
    position: absolute;
    content: '\26AB';                 
    left: 100%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    pointer-events: none;        
}