JSFiddle - React, Tailwind, and code Playground

HTML

<pre>Draggable</pre>

<ul id="myproducts">
	<li> <div class="cmd_text">1</div> </li>
	<li> <div class="cmd_text">2</div> </li>
	<li> <div class="cmd_text">3</div> </li>
	<li> <div class="cmd_text">4</div> </li>
	<li> <div class="cmd_text">5</div> </li>
	<li> <div class="cmd_text">6</div> </li>
	<li> <div class="cmd_text">7</div> </li>
	<li> <div class="cmd_text">8</div> </li>
	<li> <div class="cmd_text">9</div> </li>
</ul>

<pre>Sortable</pre>

<ul id="mylist">	
	<li> <div class="cmd_text">1</div> </li>
	<li> <div class="cmd_text">2</div> </li>
	<li> <div class="cmd_text">3</div> </li>
	<li> <div class="cmd_text">4</div> </li>
	<li> <div class="cmd_text">5</div> </li>
	<li> <div class="cmd_text">6</div> </li>
	<li> <div class="cmd_text">7</div> </li>
	<li> <div class="cmd_text">8</div> </li>
	<li> <div class="cmd_text">9</div> </li>
</ul>

<pre>Sortable Flexbox</pre>

<ul id="mylistFlex">	
	<li> <div class="cmd_text">1</div> </li>
	<li> <div class="cmd_text">2</div> </li>
	<li> <div class="cmd_text">3</div> </li>
	<li> <div class="cmd_text">4</div> </li>
	<li> <div class="cmd_text">5</div> </li>
	<li> <div class="cmd_text">6</div> </li>
	<li> <div class="cmd_text">7</div> </li>
	<li> <div class="cmd_text">8</div> </li>
	<li> <div class="cmd_text">9</div> </li>
</ul>

SCSS

* { 
  font-family: sans-serif; 
  user-select: none;
  vertical-align: top;
}

#myproducts, #mylist, #mylistFlex {
  background-color: #222;
  list-style: none;
  padding-left: 0;
}

#mylistFlex {
  display: flex;
}

li,
.sortable-placeholder {
  display: inline-block;
  width: 40px;
  height: 80px;
  background-color: #aaf;
  border-right: solid #44a 5px;
  cursor: move;
}

.sortable-placeholder {
  background-color: red;
}
 
.cmd_text {
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

JavaScript

$(function () {			

  const draggableOptions = {
  	connectToSortable: '#mylist, #mylistFlex',
    helper: 'clone',
  };

  const sortableOptions = {
		placeholder: 'sortable-placeholder',
    opacity: .7,
  };

  $("#myproducts > *").draggable(draggableOptions);
  $("#mylist, #mylistFlex").sortable(sortableOptions);

});