JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>TODO APP</title>
  <meta name="author" content="Catenate" />
  <!-- Date: 2011-11-17 -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="js/todo.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
  <div id="container">
    <header>
      <h1>Todo App</h1>
    </header>
    <form id="tasks-form">
      <input type="button" id="button" value="SAVE"><input type="button" id="button2" value="DELETE ALL">
      <br />
      <input type="text" id="task" value="Add a task press ENTER">
     <select id="max"><option selected value="10">10</option><option value="20">20</option><option value="40">40</option>
     <option value="60">60</option><option value="80">80</option><option value="100">100</option></select>
     <label for="max">Max Tasks</label>
    </form>
  </div>
  <ul id="things-to-do"></ul>
</body>
</html>

CSS

@charset 'utf-8';

body {
    background-color: #CCFF99;
    text-align: center;
}

ul{ list-style-type:decimal; 
    width:400px;
    margin: 0 auto;
}

.gradient1 {
    background-image: linear-gradient(left bottom, rgb(255,0,0) 3%, rgb(255,170,0) 76%);
    background-image: -o-linear-gradient(left bottom, rgb(255,0,0) 3%, rgb(255,170,0) 76%);
    background-image: -moz-linear-gradient(left bottom, rgb(255,0,0) 3%, rgb(255,170,0) 76%);
    background-image: -webkit-linear-gradient(left bottom, rgb(255,0,0) 3%, rgb(255,170,0) 76%);
    background-image: -ms-linear-gradient(left bottom, rgb(255,0,0) 3%, rgb(255,170,0) 76%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(0.03, rgb(255,0,0)),
    color-stop(0.76, rgb(255,170,0)));
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

.gradient2 {
    background-image: linear-gradient(left , rgb(255,191,0) 3%, rgb(17,0,255) 76%);
    background-image: -o-linear-gradient(left , rgb(255,191,0) 3%, rgb(17,0,255) 76%);
    background-image: -moz-linear-gradient(left , rgb(255,191,0) 3%, rgb(17,0,255) 76%);
    background-image: -webkit-linear-gradient(left , rgb(255,191,0) 3%, rgb(17,0,255) 76%);
    background-image: -ms-linear-gradient(left , rgb(255,191,0) 3%, rgb(17,0,255) 76%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0.03, rgb(255,191,0)),
    color-stop(0.76, rgb(17,0,255)));
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

.gradient3 {
    background-image: linear-gradient(left , rgb(0,0,245) 3%, rgb(255,0,0) 76%);
    background-image: -o-linear-gradient(left , rgb(0,0,245) 3%, rgb(255,0,0) 76%);
    background-image: -moz-linear-gradient(left , rgb(0,0,245) 3%, rgb(255,0,0) 76%);
    background-image: -webkit-linear-gradient(left , rgb(0,0,245) 3%, rgb(255,0,0) 76%);
    background-image:...

JavaScript

$(document).ready(function() {

    if(localStorage.lenght > 1){                                                // If total localStorage has more than 1 item divide by 2
        var Storage = localStorage.length/2;                                     // divided by 2 -> now also element color is stored into localStorage
    }
    else  { Storage = localStorage.length;        

    }

//    Check which tasks are already present on the list
    for(var i = 0; i < Storage; i++){
        if(localStorage.getItem('task-' + i) != null && localStorage.getItem('color-' + i) != null){                          //Avoid to display deleted elements 
            
            $("#things-to-do").append("<li id='task-" + i + "'>" + localStorage.getItem('task-' + i) + " <a href='#'>done</a>");

            var selected = localStorage.getItem('color-'+ i);                      //Store variable selected to print the right option selected.

            if(selected == 1){                                                     //Check value of selected option and prints the correcting format according to the value
                $("#task-" + i).append("<select id='color-" + i + "'>"); 
                $("#color-" + i).append(localStorage.getItem('color-' + i) + "<option selected value='1'>1 - Anytime</option><option value='2'>2 - Important</option><option value='3'>3 - Urgent</option></select></li>");
                $("#task-" + i).addClass('gradient1');                               //add class gradient to li element
            }
            else if(selected == 2){
                $("#task-" + i).append("<select id='color-" + i + "'>"); 
                $("#color-" + i).append(localStorage.getItem('color-' + i) + "<option value='1'>1 - Anytime</option><option selected value='2'>2 - Important</option><option value='3'>3 - Urgent</option></select></li>");
                $("#task-" + i).addClass('gradient2');
            }
            else if(selected == 3){
                $("#task-" +...