JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="MenuBar">
    <li> <a href=#>Upload</a></li>
   <li ><a href=#>christin Bayes</a></li>
   <li><img src="image/john.jpg" height="30" width="30"></li>   
   <li><a href=#>SignOut</a></li>
  </ul>

CSS

.MenuBar li
    {
        display: inline;
        padding-left: 15px;
        list-style:none;
            height: 30px;
    }
    
    .MenuBar li img {
    vertical-align:middle;
}