JSFiddle - React, Tailwind, and code Playground

HTML

<body>

		<div id="content">
			<div class="filterMenu">
				<ul>
					<li><a href="#" data-qtype="all">All</a></li>
	        		<li><a href="#" data-qtype="mcq">Main Scenario</a></li>
	        		<li><a href="#" data-qtype="sq">Side Quest</a></li>
        		</ul>
			</div>
	    	<table id="questTable" style="max-width: 800px;" class="all">
		        <thead>
		            <tr>
		                <th class="table-header">#</th>
		                <th class="table-header">Type</th>
		                <th class="table-header">Icon</th>
		                <th class="table-header">LvL</th>
		                <th class="table-header">Name</th>
		                <th class="table-header">Issuing NPC</th>
		                <th class="table-header">Location</th>
		                <th class="table-header">Done It?</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr id="line1" class="table-row" data-qtype="mcq">
		                <td class="shortTd">MC-1</td>
		                <td class="shortTd">Main Scenario</td>
		                <td class="shortTd">
		                    <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
		                </td>
		                <td class="shortTd">1</td>
		                <td> <a href="#" > mcq 1</a>

		                </td>
		                <td>Name 1</td>
		                <td>Area 1</td>
		                <td class="shortTd">
		                    <input class="completion" type="checkbox" id="checkbox1">
		                </td>
		            </tr>
		            <tr id="line2" class="table-row" data-qtype="mcq">
		                <td class="shortTd">Mc-2</td>
		                <td class="shortTd">Main Scenario</td>
		                <td class="shortTd">
		                    <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
		                </td>
		                <td class="shortTd">1</td>
		                <td> <a href="#">mcq 2</a>

		                </td>
		                <td>Name 2</td>
		  ...

CSS

/*Global Resets*/
/*....................................*/

* {
    margin:0;
    padding:0
}

html {
    font-family:Arial, sans-serif;
    font-size:1em
}

h1, h2, h3 {
    margin:0 auto 1em;
    text-align:center
}

h1 {
    margin-top:1em;
    margin-bottom:0
}

h2 {
    color:#e8d19e
}

h3 {
    color:#5a9dd1
}

h4 {
    margin-bottom:.5em;
    padding-bottom:20px;
    text-align:center
}

a {
    color:#CC9900;
    text-decoration:none;
    font-weight:700
}

p {
    margin-bottom:1em;
    text-align:justify;
    line-height:1.3em
}

img {
    max-width:100%
}

table {
    margin:1em auto 3em;
    border-collapse:collapse
}

table th {
    padding:.5em 1em;
    height:2em;
    font-weight:700;
    color:#9ba3b6;
    text-shadow:0 0 5px #000;
    border-bottom:solid 1px #222;
}

table td {
    padding:.5em 1em;
    height:2em;
    background-color:#282828;
    border-bottom:solid 1px #666;
    line-height:1.4em;
    text-align:left
}


#content {
    padding:1em;
    color:#DDD
}


/*Responsive Settings*/
/*...............................................*/
@media all and (max-width: 500px) {
    table {
        font-size:.8em
    }
    .npcFullCardName, .npcIcon img {
        display:none
    }
    .cardLocation {
        padding:15px;
        width:300px;
        background-size:300px;
        left:-85px;
        font-size:.8em
    }
}
@media all and (min-width: 501px) {
    .npcFullCardName {
        display:inline;
        color:#9c9;
        cursor:help
    }
}
@media all and (max-width: 1023px) {
    html {
        background:url(../images/background_low.jpg) no-repeat top center fixed #000
    }
    table {
        min-width:100%;
        width:100%
    }
}
@media all and (min-width: 1024px) {
    html {
        background:url(../images/background.jpg) no-repeat center center fixed #000;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover
    }
    #content {
       ...

JavaScript

// Filter Row Script
// ........................................
$('.filterMenu a').on('click', function(e){
  e.preventDefault();
  var c= $(this).data('qtype');
    
   //get all trs from tbody
  var trs = $("#questTable").find("tbody tr");
  trs.hide();
    
    //Filter all trs from tbody
  trs.filter(function (i, v) {
      if ($(this).data("qtype") == c) {
          return true;
      }
      if(c=="all"){
          return true;
      }
        return false;
    })
  //just show the row if it fits the criteria
    .show();
    
});

// Row Hover Script
// ........................................
$(document).ready(function() {
	$('.table-row').hover(function() {             
		$(this).addClass('current-row');
		}, function() {
			$(this).removeClass('current-row');
		});
	});

// Row hide Script
// ........................................
$(document).ready(function() {
  		$('tr')
		    .filter(':has(:checkbox:checked)')
		    .addClass('selected')
		    .end()
		  .click(function(event) {
		    if (event.target.type !== 'checkbox') {
		      $(':checkbox', this).trigger('click');
		    }
		  })
		    .find(':checkbox')
		    .click(function(event) {
		      $(this).parents('tr:first').toggleClass('selected');
		    });    
		});