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 class="separator">·</li>
        <li><a href="#">Item 2</a></li>
        <li class="separator">·</li>
        <li><a href="#">One more Item</a></li>
        <li class="separator">·</li>
        <li><a href="#">Another Item</a></li>
        <li class="separator">·</li>
        <li class="last"><a href="#">Contact</a></li>
      </ul>
    </nav>

CSS

ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: space-between;
    }
    ul img {
        display: block;
    }
    li.home {
      padding: 0;
    }
    li {
      align-self: center;
    }
    nav {
      border-bottom: 1px solid black;
      border-top: 1px solid black;
      height: 40px;
    }