JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<!-- Start First panel --> 
<div class="popover" style="display: block; padding: 10px;">
    <label><span class="glyphicon glyphicon-sort-by-alphabet rigth5"></span>Sort Smallest to Largest</label>
    <label><span class="glyphicon glyphicon-sort-by-alphabet-alt rigth5"></span>Sort Largest to Smallest</label>
     <label><span class="glyphicon glyphicon-remove rigth5"></span>Clear "Col-Name" filters </label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></button>
      </span>
    </div><!-- /input-group -->
   <div class="filter-multi-checks">
        <div><input type="checkbox" class="filter-check">Database</div>
            <div><input type="checkbox" class="filter-check">XML</div>
                <div><input type="checkbox" class="filter-check">CSV</div>
                    <div><input type="checkbox" class="filter-check">Excel</div>
                        <div><input type="checkbox" class="filter-check">Custom</div>
   </div> 

                        
                            <div class="btn btn-primary"><span class="glyphicon glyphicon-ok rigth5"></span>Apply</div>
                            <button class="btn btn-default"><span class="glyphicon glyphicon-remove rigth5"></span>Cancel</button>
</div>
<!-- End First panel -->    
<!-- Start Second panel -->     
<div class="popover right" style="display: block; padding: 10px;">
    <div class="top10">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></button>
      </span>
    </div><!-- /input-group -->
       ...

CSS

@import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css');

.rigth5{
    margin-right:5px!important;
}
.filter-check{
    margin-right:5px!important;
    padding-top:3px;
}
.filter-multi-checks{
    margin: 5px 0px 10px 25px;
}
.btn-2blocks{
    width:48.9%;
}
.popover{
    width:215px;
    margin:25px /* don't copy this */
}
.top10{
    margin-bottom:10px;
}
.right{
    left:250px;
}
.right-top{
    left:235px;
    top:180px;
}
.top{
    top:348px;
}
.daterange{
    margin-left:-5px;
}

JavaScript

$('.daterange').datepicker({});