JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class="nav mobilenav">
  <div class="header-title">
    Institution institution 1
  </div>
  <ul>
    <li><a href="/institutions/">Institutioner</a></li>
    <li>
      <a href="/leaders/">
Ledere
</a>
    </li>
    <li class="logout">
      <a class="button-dark" href="/user/logout">
Log ud
</a>
    </li>
  </ul>
</div>

CSS

.nav {
  background: white;
}

ol,
ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.header-title {
  justify-content: center;
  align-self: center;
  display: flex;
}

.nav ul li {}

.nav ul li.logout {
  margin-left: auto;
}

.nav ul li a {
  text-decoration: none;
  padding: 0px 20px;
  font-weight: 600;
}