JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
            <!--
                body,td,th {
                font-size: 12px;
            }
            li{
                border:1px solid #444444;
                background-color:#AAAAAA;
                padding:10px;
                margin:10px;
            }
            -->
        </style>
        <script language="JavaScript" type="text/javascript">
            $(document).ready(function rt()
            {    
                $("#k1").sortable({   revert: '100'  });
                $('.gt').draggable({ connectToSortable: '#k1', revert: 'invalid', revertDuration: 100 });
            });
        </script>
        
    </head>
    
    <body>
        
        
        <ul id="k1" style="width:350px; height:350px; margin:20px;">
          <li>One</li>
          <li>two</li>
          <li>three</li>
        </ul>
        

        
        <hr />
            
            <ul style="width:350px; height:350px;">
               <li class="gt">four</li>
            </ul>
          
   
        
        
    </body>
</html>