JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="logo">
    <img src="https://placekitten.com/70/60" alt="">
  </div>
  <div class="header_topics">
    <ul>
      <li><a href="#"> <span>Home</span></a></li>
      <li><a href="#"><span> About</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>

  <div class="signinx">
    <div class="signin">&nbsp;<a href="#">Signin&nbsp;<i class="fas fa-user"></i></a></div>
  </div>

</header>

CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}

ul { margin: 0; }