JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<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>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<div class="row-fluid">
  <div class="sidr left" id="collapsePanel">
    <div class="filters">
      <div class="input-group filterCrumb">
        <div class="label label-primary label-as-badge">Defect <a href="#stay"><i class="fa fa-times-circle fa-small"></i></a></div>
        <a href="#" id="dLabel" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus fa-small"></i></a>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li class="active"><a href="#">And</a></li>
          <li><a href="#stay">Or</a></li>
          <li><a href="#stay">Not</a></li>
        </ul>

        <div class="label label-primary label-as-badge">Feature <a href="#stay"><i class="fa fa-times-circle fa-small"></i></a></div>
      </div>

      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
        <input type="text" class="form-control" id="ta_filter" placeholder="Prodcut Backlog Filters" aria-describedby="basic-addon1">
      </div>
      <ul class="nav navList bs-docs-sidenav">
        <li><a href="#stay" class="choose_filter"><span>Assigned To</span></a></li><li><a href="#stay" class="choose_date_filter"><span>Created...

CSS

html,
body,
.row {
  height: 100%
}

.#collapsePanel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%
}

.input-group {
  flex: 1 0 50px;
  padding: 10px;
}

.filters {
  overflow: scroll;
  flex: 1 100% 0;
}
.btn-default .badge {
  background-color:#337ab7;
  
}

.dropdown .dropdown-menu {
  position: static;
}

.dropdown.open ul.dropdown-menu {
  float: none;
  border: none;
  box-shadow: none;
  background: transparent;
  border-left: 8px solid #eee
}

#collapsePanel {
  background: #fafafa;
  padding-right: 0
}

li {
  border-bottom: 1px solid #ececec
}

.dropdown-menu>li>a {
  display: block;
  padding: 8px 13px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #337ab7;
  white-space: nowrap;
}

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 2px 2px 15px #ccc;
}

.sidr .sidr-inner {
  padding: 0 0 15px
}

.sidr .sidr-inner>p {
  margin-left: 15px;
  margin-right: 15px
}

.sidr.right {
  left: auto;
  right: -260px
}

.sidr.left {
  left: -260px;
  right: auto
}

.filterCrumb .fa {
  font-size: 8px;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 10px;
}

.label-as-badge {
  border-radius: 1em;
  font-weight: normal;
  padding: 8px;
}

.label-as-badge .fa {
  margin: -15px 0 0 0;
  color: #ffffff;
}

.filters {
  position: absolute;
  width: 265px;
}

label {
  padding: 10px 10px 0 10px
}

code {
  display: block;
  margin-top: 10px
}

#collapseColumns {
  background: #fafafa;
  top: 4em;
  left: 0;
  right: 0;
  padding: 15px;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 2px 2px 4px #666;
  width: 100%;
  position: static;
  z-index: 1000;
  box-shadow: 2px 2px 15px #ccc;
  margin-top: 10px;
}

.nav-pills li a {
  border: 1px solid #ececec;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
  border-radius: 0;
 ...

JavaScript

$('#collapsePanelBtn').sidr({
       name: 'collapsePanel',
       side: 'left'
   });

   $('#ta_filter').keyup(function() {
       var valThis = this.value.toLowerCase(),
           lenght = this.value.length;

       $('.sidr .nav>li>a>span').each(function() {
           var text = $(this).text(),
               textL = text.toLowerCase(),
               htmlR = '<b>' + text.substr(0, lenght) + '</b>' + text.substr(lenght);
           if (textL.indexOf(valThis) == 0) {
               $(this).html(htmlR).closest('li').show();
           } else {
               $(this).closest('li').hide();
           }
       });

   });

   $(".choose_filter").click(function() {
       var text = $(this).find('span').text();
       $('.filter_name ').html(text);
       $(".single_filter").show("slide", {
           direction: "right"
       }, 500);
       //$(".filters").hide("slide", { direction: "left" }, 500);
       $('.filters').animate({
           left: "-265px"
       }, 500);
   });
      $(".choose_date_filter").click(function() {
       var text = $(this).find('span').text();
       $('.filter_name ').html(text);
       $(".single_date_filter").show("slide", {
           direction: "right"
       }, 500);
       //$(".filters").hide("slide", { direction: "left" }, 500);
       $('.filters').animate({
           left: "-265px"
       }, 500);
   });
   
   $(".back_filter").click(function() {
       $('.filters').animate({
           left: "0px"
       }, 500);
       //$(".filters").show("slide", { direction: "left" }, 500);
       $(".single_filter").hide("slide", {
           direction: "right"
       }, 500);
         $(".single_date_filter").hide("slide", {
           direction: "right"
       }, 500);
   });

   $('.add_filter').click(function() {
       alert('find a groovy way add selections to filer list');
       $(".back_filter").click();
   });

   $('.label-as-badge .fa').click(function() {
       alert('delete from crumb/filter');

   });

  ...