JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="http://codigofonte.com.br/wp-content/uploads/legado/codigos/880/sorttable.js"></script>
<html>
<head>
<title> Ordenar colunas de uma tabela </title>
<style>
/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
 
</style>
<script src="sorttable.js"></script>
</head>
 
<body>
<table border="1" width="100%" class="sortable">
    <tr>
        <td width="11%">ID</td>
        <td width="89%">NOME</td>
    </tr>
	<tr>
        <td width="11%">4</td>
        <td width="89%">João</td>
    </tr>
    <tr>
        <td width="11%">2</td>
        <td width="89%">Maria</td>
    </tr>
    <tr>
        <td width="11%">1</td>
        <td width="89%">Pedro</td>
    </tr>
    <tr>
        <td width="11%">3</td>
        <td width="89%">Antonia</td>
    </tr>
</table>
 
</body>
</html>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}