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>
    <input type="checkbox" id="prologismenuToggle" class="toggle">
    <label for="prologismenuToggle" class="toggleLabel">
      <img width="40" height="40" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABSElEQVRYR2P8////f4ZBDBhHHUhh7IyGIIUByDAagqMhSGkIUKp/eKbBaw/uM2w4eIAhNzScgZeLC28gff72jWHiyhUMIU7ODBry8iQHKMkheOPhQ4a0jlaGe0+fgi1tTsvA6UiQ42pnzWBYs28vg5K0NMOsimqSHUmyA5EtBQUHLkcSq45QkJLsQJCBhCwnJE/IUcjyZDkQnyNBcrBoxRfCxDqSbAdic6S7uQXY3p0nT4BpQmmUGEdS5EBsjoRZSg3Hgcyi2IHEpEliQgqXGqo4ENmRIDa+oodUx1LNgSCL//77B7afmYmJVHfgVE+WA0drEqTwJDkEiS2EiVVHKC2Q7EBici21HEdRMYPLEaM1CaE0gS6PHpKjNQmpIQhTDwvJ0ZqE3BCklT6yykFaOQabuaMOpDS0R0NwNAQpDQFK9Y+mQUpDEAAI/4+YPfrMHwAAAABJRU5ErkJggg==">
    </label>
    <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 Mission"><span>Our Mission</span></a></div>
            <div class="subMenuItem"><a title="Our Values"><span>Our Values</span></a></div>
            <div class="subMenuItem"><a title="Our Traits"><span>Our Traits</span></a></div>
          </div>
        </div>
      </div>
      <div class="topNavItem"><span>Teams</span>
        <div class="downArrow">
          <button><i class="ms-Icon ms-Icon--ChevronDown" data-icon-name="ChevronDown"></i></button>
        </div>
        <div class="subMenuCallout subMenuWide">
          <div class="subMenuWrapper">
            <div...

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;
        }
    }
    .toggle {
        display: none;
      }

    .toggleLabel {        
        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;
      }
     ...