JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<div id="author-sorter">
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
        <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
            <ul class="pagination jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding:  0px; width: 902px; display:table-row;">
                <li class="now jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="width: 82px;" jcarouselindex="1"><a href="?author_id=43" id="43"><img width="46" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="Alterre Bourgogne" src="http://rare.lfdb.fr/files/2013/08/Alterre_logo.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="2"><a href="?author_id=51" id="51"><img width="48" height="15" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE PACA" src="http://rare.lfdb.fr/files/2013/08/Logo_ARPE-PACA_2010_BD-150x49.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="3"><a href="?author_id=50" id="50"><img width="48" height="29" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREC Poitou-Charentes" src="http://rare.lfdb.fr/files/2013/08/AREC_logo-150x91.gif"><span...

CSS

#author-sorter {
    padding: 20px 30px;
    margin-right: 2px;
    width:900px;
}
#author-sorter > * {
    vertical-align: middle;
}
#author-sorter ul li {
    float: left;
}
#author-sorter ul li a {
    width: 48px;
    height:48px;
    display: table-cell;
vertical-align: middle;
}
#author-sorter ul li a:hover img, #author-sorter ul li.now a img {
    border: 1px solid #bcd001;
    width: 48px;
}
#author-sorter ul li.now {
    position:relative;
    vertical-align: middle;
display: table-cell;
}