JSFiddle - React, Tailwind, and code Playground

Apps Banner with Collapse Panel Option

by Meredith Crow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<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">
<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 bias-input-group" style="padding-top: 3px;"><input id="yakaboxSearchBox" aria-describedby="searchBoxHelp" class="ybx-searchBox-text form-control input-sm"...

CSS

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

.ui-yakabox-appNav .ui-yakabox-icon-link,
.ui-yakabox-appNav .ui-yakabox-link {
  color: #fff;
}

.ui-yakabox-appNav .ui-app-banner-description {
  max-height: 150px;
  text-overflow: ellipsis;
  overflow: auto;
  font-size: 18px;
}

.ui-yakabox-appNav .fa-fw {
  width: 2.5em;
}

.ui-yakabox-appNav .badge {
  font-family: "Open Sans", "Helvetica 		Neue", Helvetica, Arial, sans-serif;
  margin-left: -7px !important;
  background-color: #d9534f !important;
  color: #fff !important;
  position: unset !important;
}

.ui-yakabox-appNav .btn-primary {
  margin-top: 0px;
  text-align: left;
  padding: 10px;
}

.navbar-inverse .navbar-nav>.active {
  color: #fff;
  background-color: #090909;
}

.carousel-control {
  width: 1%;
}

.carousel .left>i,
.carousel .right>i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel .right>i {
  left: auto;
  right: 20px;
}

.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,...