JSFiddle - React, Tailwind, and code Playground

HTML

<div id="task-home">
      <div id="task-list-container">
        <div id="left-menu-expand"><a id="left-menu-expand-link" href="#"></a></div>
      <div id="task-list-inner-container">
        <div class="task-list-blue-bar">
          <div class="task-list-buttons">
            <div class="grey-button add-task"><div class="add-button-grey"></div>Add Task</div>
            <div class="grey-button complete-task">Complete</div>
            <div class="grey-button delete-task">Delete</div>
          </div>
        </div>
        <div class="task task-bar overdue-task-bar">
          <div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>
          <div class="little-grippy"></div>
          <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
          <div class="tasks-left-tag-area">
            <div class="tasks-overdue-tag">Overdue</div>
          </div>
          <div class="task-content-title">Take out the trash</div>
          <div class="tasks-right-tag-area"></div>
          <div class="tasks-due-date-area tasks-due-date-overdue">18 days Overdue</div>
          <div class="edit-pencil-icon"></div>
          <div class="task-delete-icon"></div>
        </div>
        <div class="task task-bar due-today-task-bar">
          <div class="little-grippy"></div>
          <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
          <div class="tasks-left-tag-area">
            <div class="tasks-due-today-tag">Due Today</div>
          </div>
          <div class="task-content-title">Find a better way to take out the trash</div>
          <div class="tasks-right-tag-area"></div>
          <div class="tasks-due-date-area">Due Today</div>
          <div class="edit-pencil-icon"></div>
          <div class="task-delete-icon"></div>
       </div>
        <div class="task task-bar normal-task-bar">
          <div class="little-grippy"></div>
          <div class="checkbox"><input type="checkbox" class="checkbox"...

CSS

body
{
 font-family: Arial;
 font-size: 12px;
}

.grey-button
{
  position: relative;
  float: left;
  width: auto;
  height: auto;
  margin: 0 1px 0 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #DCDCDC url(http://static.goalscdn.com/img/grey-button-background.png) 0 0;
  border: 1px solid #777;
  outline:none;
  display: block;
  color: #333;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 4px;
  line-height: 14px;
  text-shadow: #fff 0px 1px;
  cursor: pointer;
}

.grey-button:hover
{
  text-decoration: none;
}

.grey-button:active
{
  background: transparent url(http://static.goalscdn.com/img/grey-button-background-clicked.png) 0 0;
}

.add-button-grey
{
  float: left;
  margin: -1px 5px 0 2px;
  height: 14px;
  width: 17px;
  background: transparent url(http://static.goalscdn.com/img/addarticleicon.png) 0 0px no-repeat;
}

#task-home
{
  position: relative;
  float:left;
  width: 780px;
}

#task-list-container
{
  position: relative;
  float:left;
  width: 780px;
  height: auto;
  background-color: #CADDEC;
}

#task-list-inner-container
{
  margin: 0px 0 6px 6px;
  width: 768px;
  height: auto;
}

#commands-exterior
{
  float: left;
  width: 780px;
  padding-top: 5px;
  font-size: 11px;
}

#commands-interior
{
  width: 75%;
  margin: auto;
}

.task-list-blue-bar
{
  float: left;
  width: 768px;
  height: 34px;
  background-color: #2775b3;
}

.task-list-buttons
{
  width: 768px;
  padding: 5px;
}

.yellow-task-message
{
  float: left;
  margin-left: 100px;
  width: auto;
  padding: 5px;
  font-weight: bold;
  color: black;
  background-color: #FFF1A8;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.task-bar
{
  float: left;
  width: 100%;
  height: 25px;
  background: -webkit-gradient(linear, left bottom ,left top, color-stop(0, rgb(247,249,252)), color-stop(1, rgb(255,255,255)) );
  background: -moz-linear-gradient(center bottom,...

JavaScript

// Count the number of items checked
  var checked_counter = 0;

  // Turn task bar yellow on checkbox click
  $('#task-list-container :checkbox').bind('click', function() {
    if($(this).is(':checked')) {
      ++checked_counter;
      $(this).parents('.task').addClass('checked-task-bar');
      if(checked_counter >= 1) {
        // Unset disabled styling
        $('.delete-task').css({'background': ''});
        $('.complete-task').css({'background': ''});  
      }
    } else {
      --checked_counter;
      $(this).parents('.task').removeClass('checked-task-bar');
      if( checked_counter == 0 ) {
        // Make complete and delete task buttons look disabled
        $('.delete-task').css({'background': '#dcdcdc'});
        $('.complete-task').css({'background': '#dcdcdc'});
      }
    }
  });
  
  // Listen for keydown for Task list navigation
  $(this).bind('keydown', function(e) {
  // Use keydown for better compatibility
  
    // J Navigates down the list
    if(e.which == 74) {
      var next_task = $('.tipsy-task').parent('.task').next('.task');
      if($(next_task).length == 0) {
        return false;
      }
      $('.tipsy-task').remove();
      $(next_task).prepend('<div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>');
    }
    
    // K Navigates up the list
    if(e.which == 75) {
      var prev_task = $('.tipsy-task').parent('.task').prev('.task');
      if($(prev_task).length == 0) {
        return false;
      }
      $('.tipsy-task').remove();
      $(prev_task).prepend('<div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>');
    }
    
    // X Selects task, checking checkbox
    if(e.which == 88) {
      var $checkbox = $('.tipsy-task').parent().find(':checkbox');
      $checkbox.attr('checked', !$checkbox.is(':checked'));
      if($checkbox.is(':checked')) {
        ++checked_counter;
        $checkbox.parents('.task').addClass('checked-task-bar');
        if(checked_counter >= 1) {
    ...