JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="siteHeader">
  <!-- This section gets pushed to the left side-->
  <div class="siteHeader__section">
    <div class="siteHeader__item siteHeaderLogo">
      <div class="fa fa-inbox"></div>
    </div>
    <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
    <div class="siteHeader__item siteHeaderButton">Sent</div>
    <div class="siteHeader__item siteHeaderButton">Trash</div>
  </div>
  <!-- This section gets pushed to the right side-->
  <div class="siteHeader__section">
    <div class="siteHeader__item siteHeaderButton">Settings</div>
    <div class="siteHeader__item siteHeaderButton">Log out</div>
  </div>
</div>

CSS

.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
   
  justify-content: space-between;

  padding: 10px;
  background-color: #56727C;
}

  .siteHeader__section {
    /**
     * Lay out the children of this container with
     * flexbox.
     */
    display: flex;

    /**
     * Align the children in the center, along
     * the main axis. By default the children will
     * align along their top edges.
     */
    
    align-items: center;
  }

    .siteHeader__item {
      padding: 5px 15px;
      font-size: 12px;
    }

    .siteHeader__item + .siteHeader__item {
      margin-left: 5px;
    }

    .siteHeader__item.is-site-header-item-selected {
      color: #FFFFFF;
      background-color: #415F69;
      border-radius: 4px;
    }

    .siteHeaderLogo {
      font-size: 20px;
      line-height: 0;
      color: white;
    }

    .siteHeaderButton {
      cursor: pointer;
      color: #D9E9EF;
    }