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">
  <div class="col-xs-6">
  </div>
  <div class="col-xs-6">
    <div class="input-group">
      <span class="input-group-addon">
                                          <i class="fa fa-search"></i>      </span>
      <input type="text" class="form-control" aria-label="..." placeholder="Search For Member">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus"></i> Add </button>
        <div class="dropdown-menu dropdown-menu-right dropdown-wide">

          <div class="col-xs-12">
          
          <form class="form form-horizontal">
             <div class="form-group">
    <label for="exampleInputEmail1">Select User</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="KW User">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Assign Role</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="KW Select">
  </div>
 
  <button type="submit" class="btn btn-primary">Add User To App</button>
          
          </form>
          </div>

          
      </div>
      <!-- /btn-group...

CSS

html,
body {
  padding: 10px
}

.#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-wide {
  width: 400px;
  padding: 10px;
}

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

JavaScript

$(".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);
});



$('#example').DataTable({
  "scrollY": 400,
  "scrollX": true,
  paging: false,
  "bFilter": false
});

$('#collapseColumns .nav-pills').sortable();