JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajauery/2.0.3/jquery.min.js</span></div></td></tr>
        <tr><td><div class="url"><span>https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</span></div></td></tr>
    </tbody>
</table>

CSS

table, td { border: 1px solid gray; }
td, .url { width: 300px; }
.url { overflow-x: hidden; position: relative; }
.url, .url span { padding: 0; height: 20px;  line-height: 20px; }
.url span { position: absolute; left: 0; top: 0; display: block; white-space:nowrap; }
table { margin-left: 200px; }

.url span {
     transition: all 0.1s ease 0s;
    -moz-transition: all 0.1s ease 0s;
    -webkit-transition: all 0.1s ease 0s;
}

JavaScript

function log(m){
    ( console.log && console.log(m) );
    }
$(function(){
    $(".url").mousemove(function(e){
        var $targ = $(e.currentTarget)
        , $span = $targ.find('span')
        , offset = e.pageX - $targ.offset().left
        ;
        
        var parentwidth = $span.parent().width()
        , overflow = $span.width() - parentwidth
        , scrollmargin = parentwidth * 0.20 // add margin for scroll area
        , scrollwidth = parentwidth - ( scrollmargin * 2 )
        , scrolloffset = Math.min( Math.max( 0, offset - scrollmargin ),scrollwidth )
        , ratio = 0.5 - Math.cos(( scrolloffset / scrollwidth ) * Math.PI )/2
        , newpos = overflow * ratio;
        
        $span.css({ left: -newpos });
        
    });
});