JSFiddle - React, Tailwind, and code Playground

by thirdender

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<div id="colorKeys" class="ibAll">
    <span>Color Keys</span>
    <a href="#" data-attr="can-upgrade" class="mediumOrange">Can be upgraded</a>
    <a href="#" data-attr="cargo-loaded" class="paleYellow">Cargo loaded</a>
</div>
<table id="fleetAssetDetailsTable">
    <thead>
        <tr>
            <th>Ship #</th>
            <th>Ship Type</th>
            <th>ATU per hour</th>
        </tr>
    </thead>
    <tbody>
        <tr data-can-upgrade data-cargo-loaded>
            <td>35403</td>
            <td>Dreadnought</td>
            <td>750.00</td>
        </tr>
        <tr data-cargo-loaded>
            <td>31013</td>
            <td>Heavy Cruiser</td>
            <td>1,000.00</td>
        </tr>
        <tr data-can-upgrade>
            <td>31011</td>
            <td>Dreadnought</td>
            <td>750.00</td>
        </tr>
    </tbody>
</table>

SCSS

$main-color: #8FCED0;
.ibAll * {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
body {
    font: 12px Ubuntu, Arial, sans-serif;
    background: black;
    color: $main-color;
    margin: 8px;
}
.mediumOrange {
    color: #C60;
}
.paleYellow {
    color: #FFB;
}
#colorKeys {
   text-align: center;
    > * {
        padding: .4em 1em;
    }
    a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
        &.selected {
            background: rgba(255, 255, 255, .2);
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
            -webkit-border-radius: .4em;
            -moz-border-radius: .4em;
            border-radius: .4em;
        }
    }
}

#fleetAssetDetailsTable {
    margin: 2em auto;
    th, td {
        padding: .2em .4em;
        border: 1px solid $main-color;
    }
    th {
        font-weight: bold;
        background: #222;
    }
}

JavaScript

jQuery(function($) {
    var container = $("#colorKeys"),
        links = container.find("a"),
        rows = $("#fleetAssetDetailsTable tbody tr");
    container.on("click", "a", function() {
        var el = $(this);
        
        // Show this link as selected
        links.removeClass("selected");
        el.addClass("selected");

        // Show only rows matching this selector
        rows.hide().filter("[data-" + el.attr("data-attr") + "]").show();

        return false;
    });
});