JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title-bar">
  <a class="logo" href="#">
  </a>
  <div class="user-info">
    <a href="#" class="circle"></a>
    <span>User name</span>
    <div class="container">
      <a href="#" class="circle"></a>
      <a href="#" class="circle"></a>
    </div>
  </div>
  <div class="hor-nav">
    <div class="option">
      <a href="">OPTION 1</a>
      <div class="dropdown">
        <a href="#">ITEM 1</a>
      </div>
    </div>
  </div>
</div>

CSS

body { background-color: #c0c0c0; }
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; }
.title-bar {
  border-bottom: 1px solid white;
  height: 128px;
  width: 100%;
}
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; }
.logo{
  align-items: center;
  background-color: #369;
  border-right: 1px solid white;
  display: flex;
  float: left;
  font-size: 2em;
  font-kerning: none;
  justify-content: center;
}
.user-info {
  align-items: center;
  border-left: 1px solid white;
  display: flex;
  float: right;
  justify-content: space-between;
  flex-flow: column nowrap;
}
.user-info .circle {
  border: 2px solid #369;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 32px;
  margin: 8px 8px;
  overflow: hidden;
  transition: border 0.15s ease-out;
  width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
  border-top: 1px solid white;
  display: flex;
  justify-content: center;
  margin-top: 6px;width: 100%;
}
.hor-nav { background-color: #404040; overflow-x: hidden; }
.option { display: inline-block; position: relative; }
.hor-nav .option:hover {background-color: #369; }
.option a {
  color: white;
  display: inline-block;
  font-size: 1em;
  padding: 14px;
  text-align: center;
  transition: background-color 0.15s ease-out;
}
.option .dropdown { display: none; position: absolute; }
.option:hover .dropdown{ display: block; }
.dropdown a {
  display: block;
  text-align: left;
  width: 100%;
}