JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="clearLSBtn">Clear localStorage</button>
<fieldset>
    <legend>Ninjas</legend>
    <div>
        <label for="name">Name: </label><input type="text" id="name"/>
    </div>
     <div>
        <label for="address">Address: </label><input type="text" id="address"/>
    </div>
    <div>
        <label for="email">email: </label><input type="text" id="email"/>
    </div>
    <div>
        <label for="color">Color: </label><input type="text" id="color"/>
    </div>
    <button type="button" id="saveBtn">Save</button>
</fieldset>
<fieldset>
    <legend>List of Ninjas</legend>
    <div id="output"></div>
</fieldset>

JavaScript

var nameEl = document.getElementById("name");
var addressEl = document.getElementById("address");
var emailEl = document.getElementById("email");
var colorEl = document.getElementById("color");
var saveEl = document.getElementById("saveBtn");
var outputEl = document.getElementById("output");
var clearEl = document.getElementById("clearLSBtn");

console.log(window.localStorage);

var data = [];

var Ninja = function(name, address, email, color){
    this.name = name;
    this.address = address;
    this.email = email;
    this.color = color;
};
Ninja.prototype.createDiv = function(){
    var div = document.createElement("div");
    div.style.backgroundColor = this.color;
    var nameNode = document.createTextNode(this.name);    
    div.appendChild(nameNode);
    var addressNode = document.createTextNode(this.address);
    div.appendChild(addressNode);
    var emailNode = document.createTextNode(this.email);    
    div.appendChild(emailNode);
    return div;
};

    
var getData = function(){
    var name = nameEl.value;
    var address = addressEl.value;
    var email = emailEl.value;
    var color = colorEl.value;
    /*
    var obj = {
        name: name,
        color: color
    };
    */
    var ninja = new Ninja(name, address, email, color);
    
    data.push(ninja);
    updateLS();
    updateOutput();
    clearInputs();
};

clearEl.onclick = function(){
    window.localStorage.clear();    
};

var onReturnHandler = function(event){
    if(event.keyCode == 13){
        getData();
    }
};
saveEl.onclick = getData;
nameEl.onkeyup = onReturnHandler;
addressEl.onkeyup = onReturnHandler;
colorEl.onkeyup = onReturnHandler;

var updateLS = function(){
    window.localStorage.setItem("ninjas", JSON.stringify(data));    
};

var initLS = function(){
    dataLS = JSON.parse(window.localStorage.getItem("ninjas"));
    for(i in dataLS){
        var obj = dataLS[i];
        var ninja = new Ninja(obj.name, obj.address, obj.emails, obj.color);
        data.push(ninja);
...