JSFiddle - React, Tailwind, and code Playground

by rmadhuram

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1-rc2/jquery.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js"></script>
<div class="container">
    <div class="toolbar">
       <button type="button" id="filter-button" class="btn btn-small btn-primary" data-toggle="button"><span class="glyphicon glyphicon-filter"></span></button>
        
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-th-large"></span>
        Group by <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Health</a></li>
        <li><a href="#">Region</a></li>
        <li><a href="#">Service</a></li>
      </ul>
    </div>    
        
    </div>
    
    <div class="filter-pane hidden">
        
        <input type="hidden" id="filter" placeholder="Click to select tags..." style="width:400px">
    </div>
    
    <div class="gridview">
        <p>Grid view</p>
    </div>
</div>

CSS

/*
Version: 3.4.6 Timestamp: Sat Mar 22 22:30:15 EDT 2014
*/
.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.
    More Info : http://www.quirksmode.org/css/box.html
  */
  -webkit-box-sizing: border-box; /* webkit */
     -moz-box-sizing: border-box; /* firefox */
          box-sizing: border-box; /* css3 */
}

.select2-container .select2-choice {
    display: block;
    height: 26px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(to top, #eee 0%, #fff 50%);
}

.select2-container.select2-drop-above .select2-choice {
    border-bottom-color: #aaa;

    border-radius: 0 0 4px 4px;

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
    background-image: -moz-linear-gradient(center...

JavaScript

$("#filter").select2({
    multiple: true,
    
    data: [
        { text: "Health", children: [
            { id: "0", text: "Critical" },
            { id: "1", text: "Warning" },
            { id: "2", text: "Normal" }
        ] },
        { text: "Region", children: [
            { id: "FL", text: "Florida" },
            { id: "CA", text: "California" }            
        ] }
    ]
       
});

$('.btn').button();
$('.dropdown-toggle').dropdown();

$('#filter-button').click(function() {
    if ($('.filter-pane').hasClass('hidden')) {
        $('.filter-pane').removeClass('hidden');
        
    } else {
       // $('.filter-pane').addClass('hidden');
    }
    $("#filter").select2('open');
});