JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/tylergaw/jribbble/master/dist/jquery.jribbble-1.0.1.ugly.js"></script>
<div id="dribbble">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

#dribbble li.hover {
    background-color:aqua;
}
#dribbble ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#dribbble li {
    list-style: none;
    float: left;
    width: 31.33%;
    margin: 1%;
    background: #FFF;
    border: 10px solid #FFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#dribbble li img {
    width: 100%;
    height: 100%;
}
#dribbble li a, p {
    text-decoration: none;
    font-weight: 100;
    font-size: 13px;
    color: #929292;
    margin-top: 10px;
    margin-bottom: 0;
}

JavaScript

jQuery(document).ready(function ($) {

    $.jribbble.getShotsByPlayerId('oykun', function (playerShots) {
        var html = [];
        $.each(playerShots.shots, function (i, shot) {
            html.push('<li><a href="' + shot.url + '" target="_blank">');
            html.push('<img src="' + shot.image_url + '" ');
            html.push('alt="' + shot.title + '" ></a><div class="info"><p>' + shot.title + '</p></div></li>');
        });
        $('#dribbble').html(html.join(''));
    });


    $("#dribbble").on({
        mouseenter: function () {
            $(this).addClass("hover");
        },
        mouseleave: function () {
            $(this).removeClass("hover");
        }
    }, 'li');

});