JSFiddle - React, Tailwind, and code Playground

by William Cunningham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="sortable" class="alt-tablesorter tablesorter ui-table-reflow tablesorter-bootstrap hasSaveSort table hasFilters hasStickyHeaders" role="grid">
        <thead>
          <tr role="row" class="tablesorter-headerRow" style="" width="">
            <th data-column="0" class="tablesorter-header tablesorter-headerUnSorted bootstrap-header" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="sortable" unselectable="on" aria-sort="none" aria-label="Title: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"><div class="tablesorter-wrapper" style="position:relative;height:100%;width:100%"><div class="tablesorter-header-inner">Title <i class="tablesorter-icon bootstrap-icon-unsorted"></i></div></div></th>
            <th class="f-state filter-match tablesorter-header tablesorter-headerUnSorted bootstrap-header" data-placeholder="Select a State" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="sortable" unselectable="on" aria-sort="none" aria-label="State: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"><div class="tablesorter-wrapper" style="position:relative;height:100%;width:100%"><div class="tablesorter-header-inner">State <i class="tablesorter-icon bootstrap-icon-unsorted"></i></div></div></th>
            <th class="filter-match tablesorter-header tablesorter-headerUnSorted bootstrap-header" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="sortable" unselectable="on" aria-sort="none" aria-label="Category: No sort applied, activate to apply an ascending sort" style="-webkit-user-select: none;"><div class="tablesorter-wrapper"...

CSS

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before {
    content: "\f1c1";
    font-family: 'FontAwesome';
    color: #999;
    display: inline-block;
    margin: 0px 10px 0 0;
    font-size: 24px;
    vertical-align: middle;
}
.form-title:before {
    float: left;
}