JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
	body, html {
	text-align:center;
  background-color:black;
  color:white;
	}
  .box{
  	position:absolute;
  	top:0px;
  	left:0px;
	  width:100%;
    height:60%;
}
  .userBG{
	top:0px;
	left:0px;
	width:100%;
	height:50%;
}
	[draggable] {
	user-select: none;
	}
  </style>
	<script type="text/javascript">
  var source;
	function dragStarted(evt){
	//start drag
  source=evt.target;
	//set data
	evt.dataTransfer.setData("text/plain", evt.target.innerHTML);
 	//specify allowed transfer
	evt.dataTransfer.effectAllowed = "move";
	}

	function draggingOver(evt){
	//drag over
	evt.preventDefault();
	//specify operation
	evt.dataTransfer.dropEffect = "move";
	}

	function dropped(evt){
	//drop
	evt.preventDefault();
	evt.stopPropagation();
	//update text in dragged item
	source.innerHTML = evt.target.innerHTML;
	//update text in drop target
	evt.target.innerHTML = evt.dataTransfer.getData("text/plain");
	}
	</script>
  </head>
  <body>
  	<div class="box">
		<div class="userBG">
      <ul>
      <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">Apples</li>
      <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">Oranges</li>
      <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">Bananas</li>
      <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">Strawberries</li>
      </ul>
    </div>
	  </div>
  </body>
</html>