JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- site Wrapper -->
<div class="container-fluid"> 
  <!-- Fixed navbar -->
  <nav  class="navbar navbar-default  navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header"> <a class="navbar-toggle collapsed pull-right" href="#" data-toggle="collapse" data-target="#main-nav"><i class="fa fa-bars"></i></a> <a href="#" data-toggle="sidebar-menu" data-target="#sidebar-chat" class="sidebar-chat-toggle pull-right visible-xs"><i class="fa fa-comments"></i></a> <a class="navbar-brand" href="index.html">Welcome</a> </div>
      <div class="collapse navbar-collapse" id="main-nav">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Fixed navbar --> 
  <!-- sidebar -->
  <div class="sidebar-chat pull-right" id="sidebar-chat" >
    <div class="split-vertical"> 
      <!-- chat-search -->
      <div class="chat-search">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <!-- chat-search --> 
      <!-- chat-filter -->
      <ul class="chat-filter nav nav-pills " style="">
        <li class="active" style=""><a href="#" data-target="li" style="">All</a></li>
        <li class="" style=""><a href="#" data-target=".online" style="">Online</a></li>
        <li class=""><a href="#" data-target=".offline" style="">Offline</a></li>
      </ul>
      <!-- chat-filter --> 
      <!-- chat-contacts -->
      <ul class="chat-contacts">
        <li class="online" data-user-id="1" style="display: list-item;"> <a href="#">
          <div...

CSS

.navbar-default .navbar-toggle {
	height: 50px;
	padding: 0 15px;
	line-height: 50px;
	/* display: inline-block;*/
	font-size: 35px;
	margin-right: 7.5px;
	color: #212121;
	border: none
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: #FFFFFF;
	color: #26a69a;
}
.sidebar-chat-toggle {
	background-color: transparent;
	color: #26a69a;
	height: 50px;
	padding: 0 15px;
	line-height: 50px;
	display: inline-block;
	position: relative;
	font-size: 25px;
	margin: 7.5px;
}

.sidebar-chat {
	display: block;
	position: absolute !important;
	border-left: 1px solid #ededed;
	width: 200px;
	height: 100%;
	top: 50px;
	right: 0;
	z-index: 100;
	/*overflow-x:hidden;
	overflow-y: auto;*/
}
.sidebar-chat .chat-search {
	padding: 10px;
	height: auto;
}
.sidebar-chat .chat-search input {
	border-radius: 5px;
	font-weight: 300;
}
.sidebar-chat .chat-filter {
	padding: 5px 5px 5px 10px;
	border-bottom: 1px solid transparent;
}
.sidebar-chat .chat-filter li a {
	padding: 3px 5px;
	margin-right: 5px;
	font-weight: bold;
	font-size: 12px;
	height: auto;
	line-height: normal;
}
.sidebar-chat .chat-contacts {
	padding: 0px;
	list-style: none;
}
.sidebar-chat .chat-contacts li {
	border-bottom: 1px solid transparent;
}
.sidebar-chat .chat-contacts li .media .pull-left {
	padding: 14px 0;
}
.sidebar-chat .chat-contacts li .media-body {
	padding-left: 8px;
}
.sidebar-chat .chat-contacts li .contact-name {
	padding-top: 14px;
	font-weight: 500;
	height: 34px;
}
.sidebar-chat .chat-contacts li .status {
	display: inline-block;
	width: 8px;
	height: 8px;
	position: absolute;
	right: 10px;
	z-index: 1031;
	margin-top: 14px;
	border-radius: 50%;
}
.sidebar-chat .chat-contacts li.offline {
	opacity: 0.6;
}
.sidebar-chat .chat-contacts li > a {
	padding-left: 10px;
	display: block;
}
.sidebar-chat .chat-contacts li > a:hover {
	text-decoration: none;
}
.chat-window-container {
	position: fixed;
	margin-right: 0;
	bottom: 0;
	right: 210px...

JavaScript

(function($) {
    "use strict";
    
    
    $(window).resize(function() {
        if ($(window).width() < 768) {
            $('.chat-window-container .panel:not(:last)').remove();
            $('.chat-window-container .panel').attr('id', 'chat-0001');
        }

        if ($(window).width() < 900) {
            if ($('.chat-window-container .panel').length == 3) {
                $('.chat-window-container .panel:first').remove();
                $('.chat-window-container .panel:first').attr('id', 'chat-0001');
                $('.chat-window-container .panel:last').attr('id', 'chat-0002');
            }
        }

    });
    
    
    
     // match anything
    $.expr[":"].containsNoCase = function(el, i, m) {
        var search = m[3];
        if (!search) return false;
        return new RegExp(search, "i").test($(el).text());
    };

    // Search Filter
    function searchFilterCallBack($data, $opt) {
        var search = $data instanceof jQuery ? $data.val() : $(this).val(),
            opt = typeof $opt == 'undefined' ? $data.data.opt : $opt;

        var $target = $(opt.targetSelector);
        $target.show();

        if (search && search.length >= opt.charCount) {
            $target.not(":containsNoCase(" + search + ")").hide();
        }
    }

    // input filter
    $.fn.searchFilter = function(options) {
        var opt = $.extend({
            // target selector
            targetSelector: "",
            // number of characters before search is applied
            charCount: 1
        }, options);

        return this.each(function() {
            var $el = $(this);
            $el.off("keyup", searchFilterCallBack);
            $el.on("keyup", null, {
                opt: opt
            }, searchFilterCallBack);
        });

    };

    // Filter by All/Online/Offline
    $(".chat-filter a").on('click', function(e) {

        e.preventDefault();
        $('.chat-contacts li').hide();
       ...