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:...

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('color', 'white');
      })
      return;
    }
    $.each($("#ftz-table tbody tr td"), function() {
      if (!($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)) {
        $(this).css("color", "red");
      } else {
        $(this).css("color", "white");
      }
    });
  });
  $("#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);
   ...