JSFiddle - React, Tailwind, and code Playground

HTML

<form action="post">
		<input id="note_text" type="text" placeholder="enter your Note">
		<input type="button" id="add_button" value="Add Note">

	</form>
	<ul id="postItNotesList">
		
		<li>This is my very first note.</li>

		<li>This is my very Second note.</li>

	</ul>

CSS

body
		{
			background-color:rgb(249, 249, 249);
		}
		ul
		{
			list-style-type:none;
		}
		li
		{
			background-color:#fff;
			min-height:33px;
			width:200px;
			box-shadow:1px 1px 3px rgb(216, 212, 212);
			font-size:17px;
			font-family:verdana;
			padding:10px;
			font-style:italic;
			float:left;
			margin:10px;
		}
		#add_button
		{
			padding:2px;
		}

JavaScript

window.onload=init();

// Add Sticky to Page

function addStickyToPage(value) {
	var sticky = document.createElement("li");
	sticky.setAttribute("class", "sticky");
    var t = document.createTextNode(value);
    console.log(t);
    sticky.appendChild(t);
	document.getElementById("postItNotesList").appendChild(sticky);
}



// Create and get Sticky Note into the localStorage
function createSticky() {
	var value = document.getElementById("note_text").value;
	var key = "sticky_" + localStorage.length;
	localStorage.setItem(key, value);
	addStickyToPage(value);
}



function init() {

	var button = document.getElementById("add_button");
	button.onclick = createSticky;



	for (var i = 0; i < localStorage.length; i++) {
		var key = localStorage.key(i);
		if (key.substring(0, 6) == "sticky") {
			var value = localStorage.getItem(key);
			addStickyToPage(value);
		}
	}


}