JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myteam"><p><strong style ="font-size:145%;font-family:georgia;"> My Team: </strong></p><br/>
         
                    
                    <ul id="sortcard" class= 'sorting1'>
                      
                    </ul><div id = "add_friend">Image of check</div>
    
               
                </div>
               
                
                <div id="bestavailable"><p><strong style ="font-size:145%;font-family:georgia;"> Best Available: </strong></p></div>
                
                <div id="movelist" class="mousescroll">
                <ul class = 'sorting' >
                    
                    Jeremy Lin<br/>
                    98        <br/>        
                Will take the Rockets as far as Harden lets him 
                </ul>                
</div><div id = "dropbox" class="border"></div>
                <div id = "dropbox1"></div>

CSS

input{
position:relative;
top:50px;
right:-120px;    
}
#dropbox{
position:absolute;
bottom:196px;
border: solid 1px #48B1D9;
width:320px;
height:85px;
}

#dropbox1{
position:absolute;
bottom:16px;
border: solid 1px #48B1D9;
width:320px;
height:85px;
}

#add_friend{
display:none;
    
}

#myteam{
float:left;
}    
<!--
#movelist{
 height: 345px;
 
}
-->
.border{
    border: solid 1px red;
}
.mousescroll{
    float: left;
}
.mousescroll:hover {
}

.sorting{
border: solid 1px #48B1D9; 
list-style:none;
width:200px;
position:relative;
left:100px;
}
.border{
    border: solid 1px red;
}
.sorting1{
border: solid 1px #48B1D9; 
list-style:none;
width:320px;
height:85px;
   

#profilebox div{
position:relative;

JavaScript

var contents;
$(document).ready(function() {
    $('.sorting').draggable({
        revert: true,
        start: function() {
            contents = $(this).text();

        }
    });
    $('.sorting').draggable({
        containment: 'window',
        cursor: 'pointer'
    });

    $('.sorting').sortable({
        cursor: 'pointer',
        tolerance: 'pointer',
        scroll: false,
        revert: true
    });




    $('#sortcard, #dropbox, #dropbox1').droppable({
        accept: '.sorting',
        hoverClass: 'border',
        tolerance: 'touch',
        drop: function(e, ui) {
            $(this).append(ui.draggable.html() + '<br/>');

            $("#add_friend").show().fadeOut(12000);
            $(e.target).droppable("disable");

            $(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
                $(this).empty().droppable("enable");
            });
            var dropbox = $('#dropbox').html();
            var dropbox1 = $('#dropbox1').html();
            if (dropbox && dropbox1 !== '') {
                $.post("main.php", {
                    data: $(this).text()
                }, function(data) {
                    alert("Data saved.");
                });
            }
        }
    });
});