JSFiddle - React, Tailwind, and code Playground

Apps Banner with Sliding Menu Option

by Meredith Crow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">

          <div id="ybx-yakabox-site-search">
            <div data-reactroot="" class=" undefined">
              <form id="quickSearchForm999" name="SearchForm" action="/search/" method="POST"><input type="hidden" id="SearchData_BaseSearchRequirements" name="SearchData[BaseSearchRequirements]" value=""><input type="hidden" id="SearchData_RecordLimit" name="SearchData[RecordLimit]" value=""><input type="hidden" id="SearchData_StartRecord"
                  name="SearchData[StartRecord]" value=""><input type="hidden" id="SearchData_Sort_Field" name="SearchData[Sort][Field]" value=""><input type="hidden" id="SearchData_Sort_Direction" name="SearchData[Sort][Direction]" value=""><input type="hidden"
                  id="SearchData_Chooser_Enabled" name="SearchData[Chooser][Enabled]" value="0"></form>
              <div class="ui-yakabox-searchBox ui-helper-clearfix">
                <form>
                  <div class="input-group...

CSS

.ui-theme-5.ui-yakabox-appNav {
  background: url("http://rind.yakabod.net/viewvc/kiwi/html/custom/images/themes/app/raven/ui-raven-bannerbg.png?view=co&revision=1.1") center bottom #071f40;
  background-size: cover;
}

.ui-theme-5.ui-yakabox-appNav h2 {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
  text-shadow: darkblue 3px 3px 0;
  position: relative;
  z-index: 2;
}

.ui-theme-5.ui-yakabox-appNav h2 a,
.ui-theme-5.ui-yakabox-appNav h2 a:link,
.ui-theme-5.ui-yakabox-appNav h2 a:hover {
  color: #fff;
  text-decoration: none;
}

.ui-theme-5.ui-yakabox-appNav h2:after {
  content: "Yakabox Raven";
  position: absolute;
  left: 8px;
  top: 5px;
  background-image: -webkit-linear-gradient(top left, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.6) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.6) 75%);
  background-image: -o-linear-gradient(top left, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.6) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.6) 75%);
  background-image: linear-gradient(to bottom right, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.6) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.6) 75%);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
  display: block;
  text-shadow: none;
  letter-spacing: -0.04em;
}

.ui-theme-5 .ui-app-banner-description {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  padding-left: 0px;
}

.ui-yakabox-appNav {
  background: #337AB7;
  color: white;
  padding: 20px;
  height: 300px;
}

.ui-yakabox-appNav .ui-yakabox-icon-link,
.ui-yakabox-appNav .ui-yakabox-link {
  color: #fff;
  margin-bottom: 10px;
  margin-top:...