JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<script src="http://abbett.org/resources/table-filter-jquery/jquery-1.4.2.min.js"></script>
<script src="http://abbett.org/resources/table-filter-jquery/filter.js"></script>
    
    <select class="filter" style="width:100px">

<option value="2003">
                2003
            </option>
        <option value="2004">
                2004
            </option>
<option value="2005">
                2005
            </option>
<option value="2006">
                2006
            </option>
<option value="2007">
                2007
            </option>
<option value="2008">
                2008
            </option>
<option value="2009">
                2009
            </option>
<option value="2010">
                2010
            </option>
        <option value="2011">
                2011
            </option>
<option value="2012">
                2012
            </option>
<option value="2013">
                2013
            </option>
<option value="2014">
                2014
            </option>
    </select>

    <div id="filter-description"></div>

    <table border="1" id="item-list" class="item-list">
        <thead>
            <tr style="display: table-row;">
                <th rowspan="2">
                    Mês
                </th>
                <th rowspan="2">
                    Remuneração<br />
                    Total R$
                </th>
                <th colspan="4">
                    <p align="center">
                        Contribuinte
                    </p>
                </th>
                <th colspan="4">
                    <p align="center">
                        Município
                    </p>
                </th>
            </tr>
            <tr>
                <th>
                    %
                </th>
                <th>
                    Mês R$
                </th>
                <th>
                    Ano R$
                </th>
                <th>
                    Acumulado...

CSS

body {
  font-family: sans-serif;
  font-size: 12px;
}
#filters {
  background: #ddd;
  padding: 10px;
  width: 380px;
  margin-bottom: 1em;
}
select.filter {
  width: 100%;
  margin-top: 0.5em;
}
select.filter:first-child {
  margin-top: 0em;
}
table.item-list {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #ccc;
}
table.item-list tr.hover {
  background: #eeeeee;
  cursor: pointer;
}
table.item-list td {
  border-top: 1px solid #ccc;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: #666666;
}
table.item-list td.tags {
  text-align: right;
  padding-right: 0.5em;
  width: 40%;
}
table.item-list td.tags span {
  color: white;
  background: #999999;
  padding: 3px;
  margin-left: 3px;
}
div.scroll-panel {
  width: 400px;
  height: 400px;
  overflow-y: auto;
}
#filter-description {
  font-weight: bold;
  margin-bottom: 0.5em;
}