JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<script src="http://abbett.org/resources/table-filter-jquery/filter.js"></script>
 <div id="filters">
<select class="filter">
	    <option value="">Selecione um Ano</option>
	    <option value="2003">2003</option>
	    <option value="2004">2004</option>
	    <option value="2005">2005</option>
	</select> 
</div>
<div id="filter-description"></div>
<table border="1" id="item-list" class="item-list" >
        <thead >
           <tr class="2003 2004 2005  sent-jonathan tag-sent">
                <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 class="2003 2004 2005  sent-jonathan tag-sent">
                <th>
                    %
                </th>
                <th>
                    Mês R$
                </th>
                <th>
                    Ano R$
                </th>
                <th>
                    Acumulado R$
                </th>
                <th>
                    %
                </th>
                <th>
                    Mês R$
                </th>
                <th>
                    Ano R$
                </th>
                <th>
                    Acumulado R$
                </th>
            </tr>
        </thead>
        <tbody>

              <tr class="2003 sent-jonathan tag-sent">
                         <td align="right">
                                                        02
                                                    </td>
                                                    <td align="right">
                     ...

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; }