JSFiddle - React, Tailwind, and code Playground

HTML

<form>                      
   
     <input type="text" class="form-control" placeholder="Task" id="text_task">
                            
   <button type="submit" id="btn_add_task" class="btn btn-primary">Add Task</button>

</form>           
     
<ul id = "list_tasks">
                        
</ul>

JavaScript

function $(element) {
	return document.getElementById(element);
}

var taskSubmit = $('btn_add_task');
var taskBox = $('text_task');
var taskList = $('list_tasks');

taskSubmit.addEventListener('click', function(e) {
	e.preventDefault();
	var task = taskBox.value.trim();

	var newLI = document.createElement('li');
	var element = newLI.appendChild(document.createTextNode(task));

	taskList.appendChild(element);
    
    taskBox.value = '';

}, false);