JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://calebjacob.com/tooltipster/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="http://calebjacob.com/tooltipster/css/tooltipster.css">
<body onclickstart="">
    <ul>
        <li class="tooltip" title="item 1" style="width:20%"></li>
        <li class="tooltip" title="item 2" style="width:10%"></li>
        <li class="tooltip" title="item 3" style="width:20%"></li>
        <li class="tooltip" title="item 4" style="width:25%"></li>
        <li class="tooltip" title="item 5" style="width:21%"></li>
    </ul>
</body>

CSS

ul {
    list-style:none;
    margin:50px 0 0 0;
    padding:0;
}
li {
    height:60px;
    background-color:purple;
    float:left;
    display:inline;
    margin:0 1% 0 0;
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
}
li:last-child {
    margin:0px;
}
li:hover, li:active {
    background-color:red;
    -webkit-transform: scaleY(1.2);
    -moz-transform:scaleY(1.2);
    -o-transform: scaleY(1.2);
    -ms-transform: scaleY(1.2);
    transform: scaleY(1.2);
    -webkit-user-select: none;
}

JavaScript

$(document).ready(function () {
    // tooltips
    $('.tooltip').tooltipster();
});