JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<div class="prologisHeader">
  <div class="headerContainer">
    <div class="topNavItem"><a href="https://prologis.sharepoint.com/sites/corpcomm" title="The Hub"><span>The Hub</span></a></div>
    <div class="toggleDown" id="toggle_down">
      <img width="40" height="40" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABSElEQVRYR2P8////f4ZBDBhHHUhh7IyGIIUByDAagqMhSGkIUKp/eKbBaw/uM2w4eIAhNzScgZeLC28gff72jWHiyhUMIU7ODBry8iQHKMkheOPhQ4a0jlaGe0+fgi1tTsvA6UiQ42pnzWBYs28vg5K0NMOsimqSHUmyA5EtBQUHLkcSq45QkJLsQJCBhCwnJE/IUcjyZDkQnyNBcrBoxRfCxDqSbAdic6S7uQXY3p0nT4BpQmmUGEdS5EBsjoRZSg3Hgcyi2IHEpEliQgqXGqo4ENmRIDa+oodUx1LNgSCL//77B7afmYmJVHfgVE+WA0drEqTwJDkEiS2EiVVHKC2Q7EBici21HEdRMYPLEaM1CaE0gS6PHpKjNQmpIQhTDwvJ0ZqE3BCklT6yykFaOQabuaMOpDS0R0NwNAQpDQFK9Y+mQUpDEAAI/4+YPfrMHwAAAABJRU5ErkJggg=="
        onclick="prologisShowNav();">
    </div>
    <div class="toggleUp" id="toggle_up">
      <img width="40" height="40" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABL0lEQVRYR2P8////f4ZBDBhHHUhh7IyGIIUByDAagqMhSGkIUKp/ZKXBv//+gQOMmYmJ0oCD66daCH7+9o2hdtYMsMHNaRkMvFxcVHEkVRwIc9yafXvBjgpxcqaaIyl2ILrjYMFGLUdS5EB0x7mbW4Ddt/PkCaqFJNkOxBWtIJeB0iK1opssBxJKc4TkSck9JDuQWMuJVUfIsSQ78Mq9uwxZ3Z0M954+JZhbkR2pJC3NMK20nEFHSZmQm1DkSXYgSPe1B/cZNhw8wJAbGk6wvAM5cuLKFWDPaMjLk+Q4kGKyHIjLltGahOTwh2qgVobAZj/FUTxak5DbLx6tSaAJkuQ0SGyGIFYdoYxJsgNHaxK0ICU5BAlFCbXlRx1IaYiOhuBoCFIaApTqH02Dwz4EARadj5gOJFbgAAAAAElFTkSuQmCC"
        onclick="prologisHideNav();">
    </div>
    <div class="menu" role="navigation" id="prologisMenuContainer">
      <div class="topNavItem"><span>About Prologis</span>
        <div class="downArrow">
          <button><i class="ms-Icon ms-Icon--ChevronDown" data-icon-name="ChevronDown"></i></button>
        </div>
        <div class="subMenuCallout">
          <div class="subMenuWrapper">
            <div class="subMenuItem"><a title="Our Vision"><span>Our Vision</span></a></div>
            <div class="subMenuItem"><a title="Our...

SCSS

.prologisHeader {
  background-color: #fff;
  color: #1b4d4a;

  .headerContainer {
    margin: 0px 14px;
    width: 100%;
    display: flex;   
    
     .topNavItem {
        flex: 0 1 auto;
        padding-top:10px;

        > a {
          color: #1b4d4a;
          margin-right: 30px;
          text-decoration: none;          
          text-transform: uppercase;
        }
        > span {
          display:inline-block;
          height:50px;
          text-transform: uppercase;
        }
    }

    .toggleDown,
    .toggleUp {        
        display: none;        
    }
    .menu {
      align-items: baseline;      
      height: 50px;
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: flex-start;      
      list-style-type: none;
      margin-left:20px;
      padding: 0;
      position: relative;

      .topNavItem {
        flex: 0 1 auto;
        padding-top:10px;

        > a {
          color: #1b4d4a;
          margin-right: 30px;
          text-decoration: none;          
          text-transform: uppercase;
        }
        > span {
          display:inline-block;
          height:50px;
          text-transform: uppercase;
        }
/*
        &:first-child span {
          font-size:21px;
          font-weight:200;
          text-transform: none;
        }
*/        
      }
      .downArrow {
        color: black;
        float: right;
        font-family: FabricMDL2Icons;
        height:50px;
        margin-right: 25px;

        button {
          background-color: white;
          border: 0px;
          padding-top:4px;

          i {
            font-style: normal !important;
          }
        }
      }
      .subMenuCallout {
        background-color: white;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px 0px;
        display: none;
        min-width: 150px;
        position: absolute;
        top: 38px;
        z-index: 299;
      }
      .topNavItem > span:hover ~...

JavaScript

function prologisShowNav() {
  var nav = document.getElementById("prologisMenuContainer");
  nav.style.display = "block";
  var down = document.getElementById("toggle_down");
  down.style.display = "none";
  var up = document.getElementById("toggle_up");
  up.style.display = "block";
}

function prologisHideNav() {
  var nav = document.getElementById("prologisMenuContainer");
  nav.style.display = "none";
  var down = document.getElementById("toggle_down");
  down.style.display = "block";
  var up = document.getElementById("toggle_up");
  up.style.display = "none";
}