JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timeline">
        <div id="dragger" class="ui-draggable" style="left: 93px;"></div>
        <div style="left: 16px;" class="keyframe 16px ui-draggable">left: 16px</div>
        <div style="left: 197px;" class="keyframe 197px ui-draggable">left: 197px</div>
        <div style="left: 432px;" class="keyframe 432px ui-draggable">left: 432px</div>
</div>

CSS

#timeline {
border:1px solid #333333;
height:20px;
position:relative;
width:620px;
    font-size:10px;
    font-family:Arial;
}

.keyframe {
background:#000033;
border:1px solid #333333;
display:inline-block;
height:6px;
position:absolute;
width:6px;
margin:5px 0 0 0;
}


#dragger {
background:red;
height:323px;
position:absolute;
width:20px;
}

JavaScript

$("#dragger").draggable({
                            
                  containment: '#timeline',
                  axis: 'x',
                  drag: function(event, ui) {
                    var dragTime = $("#dragger").css("left");
                    $(this).text(dragTime);
} 

    });