JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/fynyky/reactor.js/master/reactor.js"></script>
<div id="noteList"></div>
<input id="noteInput" placeholder="Type a note"></input>

JavaScript

// The model is just an array of strings wrapped in a Signal
noteList = Signal(["sample note", "another sample note"]);

// The code to display the notes is wrapped in an Observer
// This code is automatically retriggered when the noteList is modified
Observer(function(){
  var noteListElement = document.getElementById("noteList");
  noteListElement.innerHTML = '';

  // "noteList().length" causes a read of noteList
  // This automatically sets noteList as a dependency of this Observer
  // When noteList is updated it automatically retriggers the whole code block
  for (var i = 0; i < noteList().length; i++) {
    var noteElement = document.createElement("div");
    noteElement.textContent = noteList()[i];
    noteListElement.appendChild(noteElement);
  }

});

// The input only needs to modify the Signal
// The UI update is automatically handled by the Observer
var noteInputElement = document.getElementById("noteInput");
noteInputElement.onkeydown = function(event){
  if (event.keyCode === 13) {
    noteList.push(noteInputElement.value);
    noteInputElement.value = '';
  }
};