JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1" title="Dica número 1, Daniel Sam">Nunc tincidunt</a></li>
    <li><a href="#tabs-2" title="Dica número 2, Daniel Sam">Proin dolor</a></li>
    <li><a href="#tabs-3" title="Dica número 3, Daniel Sam">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <table id="tabela1" class="full">
            <caption>Tabela Exemplo</caption>
            <thead>
                <tr><th>Coluna1</th><th>Coluna2</th><th>Coluna3</th></tr>
            </thead>
            <tbody>
                <tr><td title="Valor1.1">Valor1.1</td><td title="Valor2.1" >Valor2.1</td><td title="Valor3.1">Valor3.1</td></tr>
                <tr><td title="Valor1.2">Valor1.2</td><td title="Valor2.2" >Valor2.2</td><td title="Valor3.2" >Valor3.2</td></tr>
                <tr><td title="Valor1.3">Valor1.3</td><td title="Valor2.3">Valor2.3</td><td title="Valor3.3">Valor3.3</td></tr>
                <tr><td title="Valor1.4">Valor1.4</td><td title="Valor2.4">Valor2.4</td><td title="Valor3.4">Valor3.4</td></tr>
                <tr><td title="Valor1.5">Valor1.5</td><td title="Valor2.5">Valor2.5</td><td title="Valor3.5">Valor3.5</td></tr>
                <tr><td title="Valor1.6">Valor1.6</td><td title="Valor2.6">Valor2.6</td><td title="Valor3.6">Valor3.6</td></tr>
                <tr><td title="Valor1.7">Valor1.7</td><td title="Valor2.7">Valor2.7</td><td title="Valor3.7">Valor3.7</td></tr>
                <tr><td title="Valor1.8">Valor1.8</td><td title="Valor2.8">Valor2.8</td><td title="Valor3.8">Valor3.8</td></tr>
                <tr><td title="Valor1.9">Valor1.9</td><td title="Valor2.9">Valor2.9</td><td title="Valor3.9">Valor3.9</td></tr>
                <tr><td title="Valor1.10">Valor1.10</td><td title="Valor2.10">Valor2.10</td><td title="Valor3.10">Valor3.10</td></tr>
            </tbody>
...

CSS

table { margin: 5em; }
td, th { padding: 2px 4px; }


table.ui-styled-table { border-collapse: collapse; }

table.ui-styled-table td.ui-state-hover {
    font-weight: inherit;
    *font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}

table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }

table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }

table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 0px !important; }

table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }

table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }

JavaScript

(function ($) {
    $.fn.styleTable = function (options) {
        var defaults = {
            css: 'ui-styled-table'
        };
        options = $.extend(defaults, options);

        return this.each(function () {
            $this = $(this);
            $this.addClass(options.css);

            $this.on('mouseover mouseout', 'tbody tr', function (event) {
                $(this).children().toggleClass("ui-state-hover", event.type == 'mouseover');
            });

            $this.find("th").addClass("ui-state-default");
            $this.find("td").addClass("ui-widget-content");
            $this.find("tr:last-child").addClass("last-child");
        });
    };
    
    $("table").styleTable();
})(jQuery);




$(document).ready(function(){
    $( "#tabs" ).tabs();
    $(document).tooltip();    
    $("#tabela1").styleTable();
});