JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://caroufredsel.dev7studios.com/js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<p>&nbsp;</p>
<div class="list_carousel">
<ul id="foo2">
    <li style="position: relative;">
        <div class="popup">TEST 1</div>
        c
    </li>
    <li style="position: relative;">
        <div class="popup">TEST 2</div>
        a
    </li>
    <li>r</li>
    <li>o</li>
    <li>u</li>
    <li>F</li>
    <li>r</li>
    <li>e</li>
    <li>d</li>
    <li>S</li>
    <li>e</li>
    <li>l</li>
    <li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#">&lt;</a>
<a id="next2" class="next" href="#">&gt;</a>
<div id="pager2" class="pager"></div>
</div>
<br />

CSS

.list_carousel {
    background-color: #ccc;
    margin: 0 0 30px 60px;
    width: 360px;
}
.list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    background-color: #eee;
    border: 5px solid #999;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 6px;
    display: block;
    float: left;
}
.list_carousel.responsive {
    width: auto;
    margin-left: 0;
}
.clearfix {
    float: none;
    clear: both;
}
.prev {
    float: left;
    margin-left: 10px;
}
.next {
    float: right;
    margin-right: 10px;
}
.pager {
    float: left;
    width: 300px;
    text-align: center;
}
.pager a {
    margin: 0 5px;
    text-decoration: none;
}
.pager a.selected {
    text-decoration: underline;
}
.popup {
    background: red; 
    width: 50px; 
    height: 20px; 
    top: -14px; 
    left: 0px; 
    font-size: 12px; 
    z-index: 1000;
    color: #000000;
    display: none;
}

JavaScript

$(function() {

    // Scrolled by user interaction
    $('#foo2').carouFredSel({
        auto: false,
        prev: '#prev2',
        next: '#next2',
        pagination: "#pager2",
        mousewheel: true,
        swipe: {
            onMouse: true,
            onTouch: true
        }
    });

});

$('#foo2 li').mouseenter(function() {
var $this = $(this);
var posLeft = ($this.offset().left)
var posTop = ($this.offset().top)-14
$('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
}).fadeIn('fast');

}).mouseleave(function() {
    $('.popup', this).fadeOut('fast');
});