JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containter">
		<ul id="sortable"></ul>
	</div>

CSS

.containter{
	font-family: verdana;
	margin-left: auto;
	margin-right: auto;


}
#sortable { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	width: 700px; 
}
#sortable li { 
	margin: 3px 3px 3px 0; 
	padding: 1px; 
	float: left; 
	width: 20px; 
	height: 50px; 
	font-size: 2em; 
	text-align: center; 

}

JavaScript

var divL;
var word = "lorem ipsum";
$(function(){
	var parsed = word.split("");;
	var x = $("#sortable");
	for(var i = 0; i < word.length; i++){
		$('<li></li>').attr('class','item').attr('id',i).html(parsed[i]).appendTo(x);	
	}
	

});
$(function() {
	x = $( '#sortable' )
	
    x.sortable({
		placeholder:"itemPlaceHolder",
		cursor:"move",
		
	});
    x.disableSelection();
	
  });