JSFiddle - React, Tailwind, and code Playground

HTML

<div class="TimelineShadow"></div>
<div class="Task" title="tooltip to show the error <br/> that may be occuring">
                </div>
                <div class="timelineSpan"></div>
                <div class="Event">
                </div>
                <div class="Resource"></div>

CSS

.Task
{
    position: absolute;
    height: 25px;
    width: 1px;
    background-color: Yellow;
    cursor: move;
    white-space:nowrap;
    top: 0;
    font-family: Corbel;
    font-size: x-small;
    line-height:2.5em;
    text-indent: 0.5em;
    z-index: 1;
    border: 2px outset;
    border-bottom: 1px solid black;
}
.Event
{
    position: absolute;
    left:5px;
    height: 25px;
    width: 75px;
    background-color: Blue;
    cursor: move;
    white-space:nowrap;
    top: 50px;
}
.Resource
{
    position: absolute;
    left:10px;
    height: 25px;
    width: 100px;
    background-color: Red;
    cursor: move;
    white-space:nowrap;
    top: 100px;
}
.TimelineShadow
{
    position: absolute;
    height: 25px;
    opacity:0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */
    background-color: Black;
    white-space:nowrap;
    font-family: Corbel;
    font-size: x-small;
    line-height:2.5em;
    text-indent: 0.5em;
    z-index:0;
    border: 2px inset;
        width: 50px;
}
.timelineSpan
{
    position: absolute;
    z-index: 100;
    font-family: Corbel;
    font-size: x-small;
    display: none;
    background-color: White;
    border: 1px solid Teal;
    color: Black;
}

JavaScript

$(document).ready(function () {
    $(document).tooltip({
                            track: true,
                            show: {
                                effect: "slideDown",
                                delay: 250
                            }
                        });
                        $(".Timeline").mousedown(function (event) {
                            $(document).tooltip('destroy');
                        });
                        $(".Timeline").mouseup(function (event) {
                            $(document).tooltip({
                                track: true,
                                show: {
                                    effect: "slideDown",
                                    delay: 250
                                }
                            });
                        });
    $(".Task").draggable({
       axis: "x",
       containment: "parent",
       drag: function () {
             var offset = $(this).offset();
             var xPos = offset.left;
             var yPos = offset.top;
             $('#coords').text('x: ' + xPos + ', y: ' + yPos);
       }
    })
    .resizable({
        //containment: "parent",
        handles: 'e, w'
    });
    $(".Event").draggable({
       axis: "x",
       containment: "parent"
    })
    .resizable({
        //containment: "parent",
        handles: 'e, w'
    });
    $(".Resource").draggable({
        axis: "x",
        containment: "parent"
    })
    .resizable({
       //containment: "parent",
       handles: 'e, w'
    });
});