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()
            {
            $("#div1").draggable({   });
            $("#k1").sortable({   revert: '100'  });
            $('#droparea').droppable({
                  accept: 'li',
                   drop: function() { alert('ssss'); }
                   });
            });
        </script>
        
    </head>
    
    <body>
        
        <div id="div1">
            <ul id="k1" style="width:350px; height:200px; background-color:#ffffff; margin:20px; padding:10px; border:1px solid #000000;">
                <li>One</li>
                <li>two</li>
                <li>three</li>
            </ul>
            
        </div>
        
        <div id="droparea" style="position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#cccccc; z-index:-1;"></div>
        
        
        
    </body>
</html>