JSFiddle - React, Tailwind, and code Playground

by kotekzot

HTML

<div class="scroll-pane">
    <div class="scroll-content">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png">
    </div>
</div>
<button class="scroll-left">Scroll left</button>
<button class="scroll-right">Scroll right</button>
<button class="scroll-show-size">Show content size</button>

CSS

.scroll-pane {
    overflow: hidden;
    width: 100%;
}
.scroll-content {
    height: 80px;
    overflow: hidden;
    transition: margin 2s;
    -moz-transition: margin 2s; /* Firefox 4 */
    -webkit-transition: margin 2s; /* Safari and Chrome */
    -o-transition: margin 2s; /* Opera */
    background: #fefefd; /* Old browsers */
    background: -moz-linear-gradient(left,  #fefefd 0%, #dce3c4 42%, #aebf76 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefd), color-stop(42%,#dce3c4), color-stop(100%,#aebf76)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* IE10+ */
    background: linear-gradient(left,  #fefefd 0%,#dce3c4 42%,#aebf76 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=1 ); /* IE6-9 */


}
.scroll-content > * {
    height: 80px;
    margin: 0;
    padding: 0 3px;
    display: block;
    float: left;
}
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
}
#tooltip h3, #tooltip div { margin: 0; }

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
    /*
     * jQuery Tooltip plugin 1.3
     *
     * http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
     * http://docs.jquery.com/Plugins/Tooltip
     *
     * Copyright (c) 2006 - 2008 Jorn Zaefferer
     *
     * $Id: jquery.tooltip.js 5741 2008-06-21 15:22:16Z joern.zaefferer $
     * 
     * Dual licensed under the MIT and GPL licenses:
     *   http://www.opensource.org/licenses/mit-license.php
     *   http://www.gnu.org/licenses/gpl.html
     */;(function($){var helper={},current,title,tID,IE=$.browser.msie&&/MSIE\s(5\.5|6\.)/.test(navigator.userAgent),track=false;$.tooltip={blocked:false,defaults:{delay:200,fade:false,showURL:true,extraClass:"",top:15,left:15,id:"tooltip"},block:function(){$.tooltip.blocked=!$.tooltip.blocked;}};$.fn.extend({tooltip:function(settings){settings=$.extend({},$.tooltip.defaults,settings);createHelper(settings);return this.each(function(){$.data(this,"tooltip",settings);this.tOpacity=helper.parent.css("opacity");this.tooltipText=this.title;$(this).removeAttr("title");this.alt="";}).mouseover(save).mouseout(hide).click(hide);},fixPNG:IE?function(){return this.each(function(){var image=$(this).css('backgroundImage');if(image.match(/^url\(["']?(.*\.png)["']?\)$/i)){image=RegExp.$1;$(this).css({'backgroundImage':'none','filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='"+image+"')"}).each(function(){var position=$(this).css('position');if(position!='absolute'&&position!='relative')$(this).css('position','relative');});}});}:function(){return this;},unfixPNG:IE?function(){return this.each(function(){$(this).css({'filter':'',backgroundImage:''});});}:function(){return this;},hideWhenEmpty:function(){return this.each(function(){$(this)[$(this).html()?"show":"hide"]();});},url:function(){return this.attr('href')||this.attr('src');}});function...