JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="BannerContainer">
  <div class="Banner">
    <div class="BannerOverlay"></div>
    <div class="BannerMenu">
      <div class="BannerMenuOverlay"></div>
    </div>
    <div class="MenuItems">
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/S_TEAG/WP/STEAG.aspx" class="NoLinkBoxes">
        <div class="MenuItem Home"></div>
      </a>
      <div class="MenuItem Sessions"></div>
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/S_TEAG/_layouts/listform.aspx?PageType=8&ListId={25D7444D-97AE-48BD-B6F8-EE78B394567F}" class="NoLinkBoxes">
        <div class="MenuItem Register"></div>
      </a>
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/S_TEAG/WP/Service%20Demands.aspx" class="NoLinkBoxes">
        <div class="MenuItem ServiceDemands"></div>
      </a>
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/S_TEAG/Lists/STEAG%20Agenda/calendar.aspx?CalendarDate=5/1/2016" class="NoLinkBoxes">
        <div class="MenuItem Agenda"></div>
      </a>
      <a href="https://navy.deps.mil/peoeis/sites/nen/onesource/S_TEAG/WP/FAQ.aspx" class="NoLinkBoxes">
        <div class="MenuItem FAQ"></div>
      </a>
    </div>
  </div>
</div>

CSS

.BannerContainer {
  position: relative;
  min-width: 1147px;
}

.Banner {
  position: absolute;
  background: #345c7f;
  height: 300px;
  width: 99%;
}

.BannerOverlay {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/Steag_Stopgap1.png');
  height: 300px;
  width: 1147px;
  background-repeat: no-repeat;
}

.BannerMenu {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, .7);
  height: 48px;
  width: 100%;
  bottom: 0;
}

.BannerMenuOverlay {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/Steag_Stopgap2.png');
  height: 300px;
  width: 1147px;
  background-repeat: no-repeat;
  margin-top: -60px;
}

.MenuItems {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 1147px;
  height: 48px;
  bottom: 0;
}

.MenuItem {
  display: inline-block;
  height: 48px;
  cursor: pointer;
  z-index: 3;
  background: rgb(0, 136, 255);
  opacity: 0;
  transition: .2s;
}

.MenuItem:hover {
  opacity: .2;
}

.Home {
  width: 143px;
}

.Sessions {
  width: 187px;
}

.Register {
  width: 176px;
}

.ServiceDemands {
  width: 284px;
}

.Agenda {
  width: 163px;
}

.FAQ {
  width: 158px;
}

.NoLinkBoxes {
    color: rgba(0, 0, 0, 0) !important;
}