JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js-1.js"></script>
<FORM action="***" method="post">
<body onload="listLoad();">
  <div id="header">
   <h1>Работаем с локальным хранилищем</h1>
  </div>
    
  <div id="notes">
   <h3> Список записей</h3>
   <ol id="notelist"></ol>
  </div>
  
  <div id="note">
   <form id="formnote">
    
    <fieldset>
     <table>
      <tr>
       <td><label class="notefield">Наименование
         </label></td>
       <td colspan=2>
        <input id="notename" type="text" 
          class="notefield"></input>
       </td>
      </tr>
      <tr>
       <td><label class="notefield">Текст записи
         </label></td>
       <td colspan=2>
         <textarea id="notecontent" rows=10></textarea>
       </td>
      </tr>
      
      <tr>
       <td></td>
       <td class="notebtn"><button id="save" 
         type="submit" onclick="saveNote(); "
         >Сохранить</button></td>
       <td class="notebtn"><button id="delete" 
         type="submit" onclick="deleteNote();"
         >Удалить</button></td>
      </tr>
     </table>
    </fieldset>
   </form>
  </div>
  
  <div id="footer">
   <p class="footertext">2013 г.</p>
  </div>
 </body>

CSS

body {
  background-color:#F7F7F7;
}

#notes{
  float:left;
  width:250px;
}

#note{
  float:left;
  margin-left:20px;
  }
  
  #footer{
  clear:left;
  text-align:center;
  font-style:italic;
  }
  
  #formnote{
  margin-top: 30px;
}

.notebtn{
  text-align:center;
}

#notecontent, #notename{
  width:450px;
}

.notebtn{
  text-align:center;
}

td{
  vertical-align:top;
}
h1, h3{
  font-style:italic;
  text-align:center;
}

fieldset {
  border:1px dashed #CCC;
  padding:10px;

}
label {
  width:142px;
  height:32px;
  background-color:#CCCCCC;
  float:left;
  display: block;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 100%;
  letter-spacing: -1px;
  font-weight: normal;
  line-height: 1.1;
  color:#666;
}
.notefield{
  margin-top:3px;
  margin-right:2px;
  padding-top:11px;
  padding-left:6px;
  height:32px; 
}

a:link, a:visited {
  color:#666;
  font-style:italic;
  font-weight:500;
  text-decoration:none;
  font-family:Arial, Helvetica, sans-serif;
}

a:hover, li:hover{
  color:#666;
  font-style:italic;
  font-weight:bolder;
  cursor: pointer;
  }

JavaScript

function saveNote()
{  
  var name = document.getElementById('notename').value;
  var content = document.getElementById('notecontent').value;
  if(content == '')
  {
    alert('Введите валидный текст!');
  }
  else 
  {
   if (name == 0)
    {
      alert('enter valid note name');
    }
    else {localStorage[name] = content;}
  } 
  
  function listLoad()
{
  var list = document.getElementById('notelist');
  for(var i in localStorage)
  {
   var a = document.createElement('a'); 
   a.setAttribute('onclick', "loadNote('"+i+"'); return false;");
   a.innerText = i;
   var element = document.createElement('li');
   element.appendChild(a);
   list.appendChild(element);
  }   
    

function loadNote(v)
{
  document.getElementById('notecontent').value = localStorage[v];
  document.getElementById('notename').value = v;
}

function deleteNote()
{
  var name = document.getElementById('notename').value;
  if (name != '')
  {
  localStorage.removeItem(name);
  }
  else {alert('note not found');}
}