JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<!--inline header buttons--->

<div class="section2">
  <p><span class="red"><i class="fa fa-circle"></i></span>All Request</p>
</div>
<div class="pan1 responsive">
  <ul class="nav nav-pills list-inline responsive">
    <li id="edit" style="width:10%;"><a href="#"><i class="fa fa-edit icon"></i><span class="hidden-xs">Edit</span></a></li>
    <li style="width:10%;"><a href="#"><i class="fa fa-times icon"></i><span class="hidden-xs delbutton">Delete</span></a></li>
    <li style="width:11%;"><a href="#"><i class="fa fa-circle green"></i><span class="hidden-xs">Approve</span></a></li>
    <li style="width:11%;"><a href="#"><i class="fa fa-circle red"></i><span class="hidden-xs">Reject</span></a></li>
    <li style="width:13%;"><a href="#"><i class="fa fa-file-excel-o icon"></i><span class="hidden-xs">Export Excel</span></a></li>
    <li style="width:13%;"><a href="#"><i class="fa fa-refresh icon"></i><span class="hidden-xs">Refresh List</span></a></li>
    <li class="input-group add-on last hidden-xs" style="width:29%;">
      <input type="text" class="form-control" placeholder="Search by keyword">
      <span class="input-group-btn"><button class="btn btn-default srchbtn" type="button"><i class="fa fa-search"></i></button></span>
    </li>
  </ul>
</div>

<div class="row visible-xs-block">
  <div class="col-sm-12">
    <div id="custom-search-input">
      <div class="input-group col-md-12">
        <input type="text" class="  search-query form-control" placeholder="Search by keyword" />
        <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <span class="fa fa-search"></span>
        </button>
        </span>
      </div>
    </div>
  </div>
</div>

<!---my table-->
<div class="row">
  <div class="col-md-12">
    <div class="panel-body">
      <div class="table-responsive" id="tt">
        <table class="table table-bordered table-hover tgrey" id="datatable">
        ...