JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Task2JQuery.js"></script>
<div class="main-container">
	<div class="login-nav">
	<ul>
		<li><a href="" target="_blank">Request a Quote |</a></li>
		<li><a href="" target="_blank">Client Login |</a></li>
		<li><a href="" target="_blank">Vehicle Export Portal</a></li>
	</ul>	
	</div>
	<div class="header">
		<img src="logo.png">
		<div class="nav-bar">
			<ul>
				<li><a href="Task2.html">HOME</a></li>
				<li><a href="">ABOUT FTZWS</a></li>
				<li><a href="services.html">OUR SERVICES</a></li>
				<li><a href="">OUR CLIENTS</a></li>
				<li><a href="">CONTACT US</a></li>
			</ul>
		</div>
	</div>
	<div id="effect" class="services-container">
		<div class="table-search-container">
			<div class="search-container">
				<input type="text" id="search" placeholder="search"/>
			</div>
			<div class="services-table-container">
				<table id="ftz-table">
					<tr>
						<th><input id="main-checkbox" type="checkbox" class="background-transparent"value=""/></th>
						<th class="element-align">ID</th>
						<th class="element-align">NAME</th>
						<th class="element-align">SCORE</th>
						<th>EMAIL</th>
					</tr>
				</table>
			</div>
			<div class="button-container">
				<button id="calculate">Calculate</button>
				<span id="average"></span>
				<span id="max"></span>
			</div>	
		</div>	
	</div>
	<div id="footer">
                Copyright ©2014 FTZ World Services. All Rights Reserved. 
				<span id="footer-links">
				<a href="">Contact Us</a>  |
				<a href="">Request a Quote</a>
				</span>
	</div>
</div>
</body>

CSS

body {
	margin:auto;
    background-image:url("bg.jpg");
	background-repeat: no-repeat;
	background-size:1920px 974px;
}
.main-container{
	border: 0px solid none;
	height:974px;
	width:960px;
	margin:0px auto;
	margin-top:-16px;
	font-family:trebuchet ms;
}
.login-nav{
	border: 0px solid white;
	height: 35px;
	margin-top: 0px;
}
.header {
	border: 0px;
	background-color:rgba(0, 0, 0, 0.7);
	height:64px;
	margin-top:40px;
	outline:1px solid #394B61;
	outline-offset:-5px;
}
.login-nav ul li a{
	text-decoration:none;
	color:white;
	padding-left:2px;
	padding-right:1px;
	font-family:trebuchet ms;
}
.banner{
	padding-top:36px;
	border: 0px solid black;
	height:162px;
	background-color:rgba(0, 0, 0, 0.5);
}
.banner h3{
	padding-left:32px;
	color: white;
	font-size:40px;
	letter-spacing:10px;
	font-family:century gothic;
	font-weight: normal;
	text-align:left;
	margin-top:0px;
	margin-bottom:0px;
}
.body-container{
	background-color:rgba(0, 0, 0, 0.7);
	height:550px;
}
.body-container div{
	width:300px;
	padding-left:20px;
	padding-top:20px;
	float: left;
}
.header img{
	float:left;
	width:200px;
	margin-top:-40px;
	margin-left:5px;
	position:absolute;
}
p{
	color:white;
	font-size:15px;
	margin-right:20px;
	font-family:trebuchet MS;
}
.body-container a{
	color:skyblue;
	font-family:trebuchet MS;
	font-size:15px;
}
.login-nav ul{
	float:right;
	background-color:rgba(0,0,0,0.5);
	padding-left:0px;
	margin-bottom:0px;
}
.login-nav a{
	font-family:verdana;
	font-size:13px;
}
.login-nav li{
	display:inline-block;
}
.nav-bar ul{
	float:right;
	margin-right: 10px;
}
.nav-bar li a:hover{
	background-color:#486881;
	border-radius:5px;
}
.nav-bar li:after{
	content:"|";
	font-size:20px;
	color:white;
}
.nav-bar li  a{
	text-decoration:none;
	display: inline-block;	
	margin-top:auto;
	color:skyblue;
	font-family:calibri;
	float:right;
	padding-left:20px;
	padding-right:10px;
	font-size:20px;
}
.nav-bar ul li:first-child:after{
	content:"";
}
.nav-bar...

JavaScript

$(document).ready(function(){
	function Employee(args){
		this.id = args ? args.id : null;
		this.name = args ? args.name : null;
		this.score = args ? args.score : null;
		this.email = args ? args.email : null;
	}
		var employees =[];
		employees.push(new Employee({id:1,name:"Vijay",score:19,email:"vijay@tfd.com"}));
		employees.push(new Employee({id:2,name:"Sashi",score:20,email:"sashi@tfd.com"}));
		employees.push(new Employee({id:3,name:"Ravi",score:20,email:"ravi@tfd.com"}));
		employees.push(new Employee({id:4,name:"Raju",score:20,email:"raju@tfd.com"}));
		var empTable;
		for(var i = 0; i < employees.length; i++){
			empTable += "<tr>";
			empTable += "<td><input type='checkbox' class='child-checkbox'/></td><td class='element-align'>" + employees[i].id + "</td><td class='element-align'>" + employees[i].name + "</td><td class='element-align'>" + employees[i].score + "</td><td class='element-align'>" + employees[i].email + "</td>";	
			empTable += "</tr>";
		}
		$('#ftz-table tr:last').after(empTable);
	$("#search").keyup(function(){
        _this = $(this);
		if(_this.val() == ""){
			$.each($("#ftz-table tbody tr td"), function() { 
			$(this).css('background-color','rgba(0,0,0,0)'); 
		})
		return;
		}
        $.each($("#ftz-table tbody tr td"), function() {
            if(!($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)){
				$(this).css("background-color","red");
			}	
			else{
				$(this).css("background-color","rgba(0,0,0,0)");	
			}
        });
    }); 
	$("#calculate").click(function(){
		var number = 0;
		var total = 0;
		var max = 0;
		$(".child-checkbox").each(function(i){
			if(this.checked){
				number++;
				total += employees[i].score;
				if(max < employees[i].score){
					max = employees[i].score;
				}
			}
		});
		$("#average").text("Average: " + total/number);
		$("#max").text("Maximum: " + max);
	});
	$("#main-checkbox").change(function(){  
		var status = this.checked; 
		$(".child-checkbox").each(function(){...