JSFiddle - React, Tailwind, and code Playground

by viphalongpro

HTML

<ul id='list_container'>    
</ul>
<input id='plan_submit'/>
<button>Add</button>

CSS

.list_item {    
    transition:opacity 1s;    
}

JavaScript

function addItem(text){
     var item = document.createElement('li');
     item.innerHTML = text;
     item.className = 'list_item';     
     var listContainer = document.getElementById('list_container');
     listContainer.appendChild(item);
     item.style.opacity = 0;          
     setTimeout(function(){ item.style.opacity = 1}, 1);
}
document.getElementsByTagName('button')[0].onclick = function(e){
    addItem(document.getElementById('plan_submit').value);
};