JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<table id="SearchTable">
    <tr>
        <th></th>
        <th>Report Detail</th>
        <th>Form</th>
        <th>Attachments</th>
        <th>Result</th>
        <th> Report No.</th>
        <th>Report Date</th>
        <th>Form No.</th>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
</table>

CSS

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes...

JavaScript

$("#SearchTable").find("td.reportManager:not(:empty)").html('<span style="opacity: 0.349019607843137; font-size: 40px;"><i class="fa fa-file-o"></i></span>')