JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'>
      <a href='#' id='logo'>
        <div class='buttons-logo-arrow'></div>
      </a>
      <div id='top-menu'>
        <div class='center'>
          <div class='pinterest-button'>dsad</div>
          <div class='twitter-button'>dasds</div>
        </div>
      </div>
    </div>

CSS

#header {
  background: #eeeeee;
  position: fixed;
  margin: 0;
  padding: 0;
  z-index: 10000;
  top: 0;
  left: 0;
  height: 45px;
  width: 100%;
}

#logo {
  background-color: yellow;
  display: block;
  margin:0 auto;
  width: 180px;
  height: 45px;
}

#logo:hover {
  background-color: #e2e2e2;
}

#logo:hover .buttons-logo-arrow {
  display: block;
}


.center {
  display: block;
  margin: auto;
}


#top-menu {
  display: block;
  height: 45px;
  width: 100%;
}

#top-menu .center {
  width: 5px;

}

#top-menu .center .pinterest-button {
  display: block;
  float: left;
  background-color: red;
  width: 45px;
  height: 45px;
  cursor: pointer;
  margin: 0 2px;
}

#top-menu .center .twitter-button {
  display: block;
  float: left;
  background-color: blue;
  width: 45px;
  height: 45px;
  cursor: pointer;
  margin: 0 2px;
}