JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="container">
    <header>
      <h1>TO DO LIST</h1>
    </header>
    <nav>
      <ul>
			<li class="navButton" rel="yesterday"><a href="#">Yesterday</a></li>
			<li class="navButton active" rel="today"><a href="#">Today</a></li>
			<li class="navButton" rel="tomorrow"><a href="#">Tomorrow</a></li>
      </ul>
    </nav>
    <div class="yesterday">
      <ul class="list" id="yesterday">
        <li>
          <input type="checkbox" id="cbox">
          <label for="cbox"></label>first</li>
      </ul>
    </div>
    <div class="today">
      <ul class="list listActive " id="today">
        <li>
          <input type="checkbox" id="cbox">
          <label for="cbox"></label>second</li>
      </ul>
    </div>
    <div class="tomorrow">
      <ul class="list" id="tomorrow">
        <li>
          <input type="checkbox" id="cbox">
          <label for="cbox"></label>third</li>
      </ul>
    </div>
    <div class="menu">
      <label>Add Task:</label>
      <input type="text" id="item">
      <br>
      <label>Date complete:</label>
      <input type="text" id="date">
      <br>
      <input type="button" value="Add" id="addButton">
      <input type="button" value="remove" id="removeButton">
    </div>

  </div>

  <!--script type="text/javascript" src="todo.js"></script-->
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: darkgrey;
  font-family: Ariel, Charcoal, sans-serif;
}

#container {
  width: 500px;
  height: 525px;
  background-color: #f8f7f5;
  margin: 50px auto;
}

header {
  background: rgba(18, 136, 255, 1);
  background: -moz-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18, 136, 255, 1)), color-stop(100%, rgba(8, 182, 245, 1)));
  background: -webkit-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
  background: -o-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
  background: -ms-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
  background: linear-gradient(to bottom, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#08b6f5', GradientType=0);
  margin: 0;
  height: 60px;
  line-height: 60px;
  color: white;
  text-align: center;
}

nav {
  background-color: white;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: white;
  overflow: hidden;
}

nav li {
  float: left;
  width: 33.1%;
  border-right: 1px solid;
}

nav li:last-child {
  border: none;
}

nav li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: black;
}

.active {
  background-color: #f8f7f5;
}

h1 {
  margin: 0;
}

.list {
  height: 250px;
  overflow: hidden;
  list-style: none;
  display: none;
}

.input {
  padding-left: 30px;
}

.listActive {
  display: block;
}


/*.yesterday{
	
}

.tomorrow{
	display: none;
}*/

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 8px;
  background-color: #aaa;
  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
 ...

JavaScript

(function() {
  var elems = document.querySelectorAll("nav li");
  var listElems = document.querySelectorAll("div > ul");

  var makeActive = function() {
    for (var i = 0; i < elems.length; i++)
      elems[i].classList.remove('active');

    this.classList.add('active');
  };

  var getList = function() {
		for (var i = 0; i < listElems.length; i++) {
			listElems[i].classList.remove('listActive');
		}
		var rel = this.getAttribute('rel');
		var ulNode = document.getElementById(rel);
		ulNode.classList.add('listActive');
  }

  for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('click', function() {
      makeActive.call(this);
      getList.call(this);
    });
})();