JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<!doctype html>
<html lang="en">


<div class="demo">
    <div id="target">
        <p>This is the position target element.</p>
    </div>

    <div class="positionable" style="width: 75px; height: 300px;">
        <p>to position</p>
    </div>

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

    <form style="padding: 20px; margin-top: 75px;">
        <h2>Position configuration:</h2>
        <div style="padding-bottom: 20px;">
            <b>my:</b>
            <select id="my_horizontal">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right" selected="selected">right</option>
            </select>
            <select id="my_vertical">
                <option value="top">top</option>
                <option value="middle">center</option>
                <option value="bottom">bottom</option>
            </select>
        </div>
        <div style="padding-bottom: 20px;">
            <b>at:</b>
            <select id="at_horizontal">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right" selected="selected">right</option>
            </select>
            <select id="at_vertical">
                <option value="bottom">bottom</option>
                <option value="top">top</option>
                <option value="middle">center</option>
            </select>
        </div>
        <div style="padding-bottom: 20px;">
            <b>collision:</b>
            <select id="collision_horizontal">
                <option value="flip">flip</option>
                <option value="fit">fit</option>
                <option...

CSS

.demo {
            position: relative;
            height: 500px;
            width: 80%;
            margin: 20px auto;
            background: #eee;
        }
        #target {
            width: 60%;
            margin: 0 auto;
            border: 1px solid #777;
            background-color: #fbca93;
            text-align: center;
            cursor: move;
        }
        .positionable {
            position: absolute;
            background-color: #bcd5e6;
            text-align: center;
        }
        .extra-margin {
            margin: 0 15px 15px 0;
        }

JavaScript

var within = $( ".demo" ),
                positionable = $( ".positionable" );
            function position() {
                positionable.position({
                    of: $( "#target" ),
                    my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
                    at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
                    collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
                });
            }

            positionable.css( "opacity", 0.5 );

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

            $( "#within" ).click(function() {
                within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
                position();
            });

            $( "#margin" ).click(function() {
                positionable.toggleClass( "extra-margin" );
                position();
            });
            $( "#trigger_position" ).click(position);

            $( "select, input" ).bind( "click keyup change", function() { position(); } );

            position();