JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<h2>Simple To Do List</h2>  
		<form name="List">
			<input type="text" name="AddItem"/>
		</form>
    
		<div id="btn">Add</div>
		<br/>
		<ol></ol>
      
      
    
    </div>

CSS

.wrapper{
padding: 25px;
width: 350px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}


input{
padding: 5px 30px ;
}

#btn{
display: inline-block;
background-color:#28ADE5;
color:#000;
border-radius: 6px;
text-align:center;
margin-top:3px;
padding: 5px 20px;
}

#btn:hover{
cursor: pointer;
}

ol {padding-left: 20px;}

ol li {padding: 5px;color:#000;}

.cross_line{text-decoration: line-through;}

li:hover{
  cursor: pointer;
 }

JavaScript

$(document).ready(
		    function(){
		        $('#btn').click(
		            function(){
		                var add = $('input[name=AddItem]').val();
		                 $('ol').append('<li>' + add + '</li>');
		            });
		       
		       $("input[name=AddItem]").keyup(function(event){
		          if(event.keyCode == 13){
		            $("#btn").click();
		          }         
		      });
		      
		      $(document).on('dblclick','li', function(){
		        $(this).toggleClass('cross_line').fadeOut('slow');
		      });
		      
		      $('input').focus(function() {
		        $(this).val('');
		      });
		      
		      $('ol').sortable();  
		      
		    }
	);