JSFiddle - React, Tailwind, and code Playground

HTML

<style>

div.demo{
    width: 1000px;
    height: 1000px;
}   



div#parent {
        width: 300px;
        margin: 10px auto;
        padding: 5px;
        border: 1px solid #777;
        background-color: #fbca93;
    text-align: center;
    position: absolute;
    top: 70px;
right: 100px;
    }
    div.positionable {
        width: 75px;
        height: 75px;
        position: absolute;
        display: block;
        right: 0;
        bottom: 0;
        background-color: #bcd5e6;
        text-align: center;
    }
    select, input {
        margin-left: 15px;
    }
    </style>
    <script>
    $(function() {
        
        function position() {
            $( ".positionable" ).position({
                of: $( "#parent" ),
                my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
                at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
                offset: $( "#offset" ).val(),
                collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val(),
                within: $( ".demo" )
            });
        }

        $( ".positionable" ).css( "opacity", 0.5 );

        $( ":input" ).bind( "click keyup change", position );

        $( "#parent" ).draggable({
            drag: position
        });

        position();
        });

        $(document).ready(function () {
             $(window).scrollTop(50);
        });

</script>

<div class="container">

<div class="demo">

<div id="parent">
    <p>
    This is the position parent element.
    </p>
</div>

<div class="positionable">
    <p>
    to position
    </p>
</div>

<div class="positionable" style="width:120px; height: 40px;">
    <p>
    to position 2
    </p>
</div>

<div style="padding: 20px; margin-top: 75px;">
    position...
    <div style="padding-bottom: 20px;">
        <b>my:</b>
        <select id="my_horizontal">
            <option selected value="left">left</option>
            <option...