JSFiddle - React, Tailwind, and code Playground

HTML

<input id="todo">
  
  <div id="demo"></div>
  
  <button id="btn">SHOW ARRAY</button>
    <div id="demolist"></div>

CSS

ul{
  border:2px solid red;
  margin-top:10px;
}

li{
  background:#ccc;
}

#todo{
  margin-bottom:20px;
}

#demo{
  width:300px;

}

#btn{
  margin-top:20px;
}

.hasNote{
  opacity:0;
  transition: opacity 2s;
}

.taskitem{
  background:#ccc;
  transition: opacity 2s;
  opacity:0;
  margin: 5px auto;
}

.tasknote{
  transition: height 1s;
  overflow:hidden;

}

.newDiv{
  opacity:0;
  transition: opacity 1s;
}

JavaScript

function grab(id) { 
  return document.getElementById(id); 
}

var when = function() {
  return function(obj, event, func) {
    obj.addEventListener(event, func, false);
  }; 
}();

function make(el,type,name,content){
  var theElement = document.createElement(el);
  theElement.setAttribute(type, name);
  theElement.innerHTML = content;
  return theElement;
}

function setStyle(theElement){
  return window.getComputedStyle(theElement);
}

function fadeIn(theElement){
  var compute = setStyle(theElement).opacity;
  theElement.style.opacity = 1;
}
/*****************************************************/

var toDo = grab("todo");
var result = grab("demo");
var demolist = grab("demolist");
var button = grab("btn");

when(toDo, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    toDo.value = "";
  }
});

when(button, "click", function(event){
  demolist.innerHTML = "";
   for(i=0; i< fruits.length; i++){
     demolist.innerHTML += fruits[i].Name + " " + fruits[i].Note + "<br>";
   }
});


function showNotes(targeti){
  var defaultNote = "No note yet";
  if(targeti){
    
  }
}

var fruits = [];

/*********************************************************/

//create Task object
function Task(name, note){
  this.Name = name;
  this.Note = note;
  this.completed = false;
}

// function that adds new task to the array
function pushArray(){
  var newtask = new Task(toDo.value, "No note yet");
  fruits.push(newtask);  
  displayArray(result, newtask.Name);
  appendNote(result, newtask);
  localStorage.setItem(newtask, JSON.stringify(newtask));
}

//function that displays array elements
function displayArray(parent,obj){
  var task = make("div","class","taskitem",obj);
  parent.appendChild(task);
  fadeIn(task);
}

//function that displays notes
function appendNote(theElement,obj){ 
  var newClassItem = make("input","class","tasknote");
  theElement.appendChild(newClassItem);
  when(newClassItem, "keypress",...