JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu-navigation">
         <ul>
            <li>
               <span class="icon services"></span>
               <a href="#" title="">Services</a>
            </li>
            <li>
               <span class="icon portfolio"></span>
               <a href="#" title="">Portfolio</a>
            </li>
            <li>
               <span class="icon clients"></span>
               <a href="#" title="">Clients</a>
            </li>
            <li>
               <span class="icon location"></span>
               <a href="#" title="">Location</a>
            </li>
            <li>
               <span class="icon contact"></span>
               <a href="#" title="">Contact</a>
            </li>
            <li class="logotipo">
               LOGO
            </li>
         </ul>
      </nav>

CSS

nav{
            background-color: #dddddd;
            padding-left: 5em;
         }
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         li {
             padding-right:1em;
            display: inline;
         }
         a {
            width: 100px;
         }
         .logotipo{
            background-color: #ffffff;
            margin:20px;
            padding:20px;
         }