JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<header>
  <img id="logo" src="https://via.placeholder.com/100">
  <div class="menu-item bottom">
  GAMING
  </div>
  <div class="menu-item top">
  TECH
  </div>
  <div class="menu-item bottom">
  TSHIRTS
  </div>
  <div class="menu-item top">
  CONTACT
  </div>
  <img class="social-item first" src="https://via.placeholder.com/40x40.png?text=F">  <img class="social-item" src="https://via.placeholder.com/40x40.png?text=T">  <img class="social-item" src="https://via.placeholder.com/40x40.png?text=I">
</header>

CSS

header {
  display: flex;
  align-items: center;
}

#logo {
  margin-right: auto;
}

.menu-item {
  padding: 0.5em;
}

.social-item {
  padding: 0.2em;
}

.social-items {
  align-self: center;
}

.social-item.first {
  margin-left: auto;
}

.menu-item.top {
  transform: translateY(-0.3em);
}

.menu-item.bottom {
  transform: translateY(0.3em);
}