JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/foundation.5.min.css">
<body>
  <div class="row">
    <div class="small-12 columns text-center">
      <h1 class="h1">Todo Application</h1>
    </div>
  </div>
  <div class="row">
    <div class="small-8 columns">
      <progress class="mainProgress" max="100" value="5"></progress>
    </div>
    <div class="small-4 columns text-right">
      <button class="addTask">Add Task</button>
    </div>
  </div>
  <div class="row">
    <div class="small-9 columns listContainer">
      <div class="row">
        <ul id="taskList" class="inline-list"></ul>
      </div>
    </div>
    <div class="small-3 columns newTaskForm">
        <label for="newTaskTitle">Task Title</label>
        <input type="text" class="newTaskTitle"/>
        <label for="newTaskDescription">Task Description
          <textarea class="newTaskDescription"></textarea>
        </label>
        <label>Time type</label>
        <input type="radio" name="time" value=0 class="timeType hours"/>
        <label for="hours">Hours</label>
        <input type="radio" name="time" value=1 class="timeType days" />
        <label for="days">Days</label>
        <label for="taskTime">Task Time</label>
        <input type="text" class="taskTime"/>
        <button class="submitTask small">Submit</button>
    </div>
  </div>

CSS

/*Todo app stylesheet */                                                                                                                       

body {
  margin-top: 1em;
}

#taskList ul {
}

#taskList li {
  word-wrap: break-word;
  margin: 5px;
  padding: 10px;
  width: 32%;
  border: 2px solid black;
  border-radius: 35px;
}

#taskList li:nth-child(3n +1) {
   clear: left;
}

JavaScript

//Todo App                                                                                                                                     
//Tyler Oliver 

/* Global Variable Declaration
*/
var progress;
var ttlTasks = 0;
console.log(ttlTasks);
/*********    UI Logic
********************************
*/
$('.newTaskForm').hide();

$('.addTask').click(function(){
  $('.newTaskForm').toggle();
  /*if($('.listContainer').hasClass('small-12')){
    $('.listContainer').removeClass('small-12');
    $('.listContainer').addClass('small-9');
  } else if($('.listContainer').hasClass('small-9')){
    $('.listContainer').removeClass('small-9');
    $('.listContainer').addClass('small-12');
  }*/
  clearTaskForm();
});

function clearTaskForm(){
  $(".newTaskTitle").val("");function readTaskForm(){ 
  console.log('clicked'); 
  var taskTitle = $(".newTaskTitle").val();
  var taskDescription = $(".newTaskDescription").val();
  var taskTime;
  console.log(ttlTasks);
  if ($('[name="time"]:checked').val() == 0){ //Calculate the taskTime
    taskTime = $('.taskTime').val() / 24;
  } else{
    taskTime = $('.taskTime').val() * 1;
  }

  taskTime = Math.ceil(taskTime * 100)/100; //round time to 2 decimal points

  console.log("title " + taskTitle + " type " + taskTime + " Desc " + taskDescription);
  addTask(taskTitle, taskDescription, taskTime, ttlTasks); //send data to addTask()
  $('.newTaskForm').hide();
  clearTaskForm();
}

//Appends task data to the task list
function addTask(taskTitle, taskDescription, taskTime, ttlTasks){
  console.log(ttlTasks);
  console.log("addTask() title" + taskTitle);
 // $('.newTaskForm').hide();
  $('#taskList').append("<li class='todoListItem'><p class='right'><small>Complete? </small>"
    + "<input class='completedTask' type='checkbox' /></p>"
    + "<br/><h2 class='text-center taskTitle'>" + taskTitle + "</h2>"
    + "<hr/><small>Description</small><h6>" + taskDescription + "</h6><small>Time in days</small><h6>" + taskTime + "<br/><br/>"
  ...