JSFiddle - React, Tailwind, and code Playground

HTML

<table class='maintbl'>
    <tr>
        <thead>
            <th>Name</th>
            <th>Position</th>
            <th>Auth</th>
        </thead>
    </tr>
    <tr>
        <td>Alan</td>
        <td>A43</td>
        <td>3</td>
    </tr>
</table>

CSS

table {
    font-family:"Arial";
    font-size: 13px;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid black;
    vertical-align: middle;
}
table td {
    border: 1px solid black;
    padding-left: 5px;
}
table th {
    border: 1px solid black;
    padding:0 25px 0 25px;
}
.maintbl {
    font-size: 18px;
    vertical-align: middle;
    text-align: center;
}
a:link, a:active, a:visited {
    color: black;
    font-weight: bold;
    text-decoration:none !important;
}
.maintbl tr:nth-child(even) {
    background-color: #BCDFF5;
}
.maintbl tr:nth-child(odd) {
    background-color: #DEEFFA;
}
.headerSortUp {
    background: url(http://placehold.it/25x25) no-repeat 99%;
}
.headerSortDown {
    background: url(http://placehold.it/25x25) no-repeat 99%;
}
table thead tr {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

JavaScript

$("table th").addClass("headerSortUp");