JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="flickable1">
      <ul> 
        <li>Content 1</li>
        <li>Content 2</li>
        <li>Content 3</li>
        <li>Content 4</li>
        <li>Content 5</li>
        <li>Content 6</li>
        <li>Content 7</li>
      </ul>
      <div style="clear:both;"></div>
    </div>
<p id="select_box">
<a href="#" id="select1">1</a>
<a href="#" id="select2">2</a>
<a href="#" id="select3">3</a>
</p>

CSS

#flickable1 {
        border: 1px solid #CCC;
        width: 480px;
        height: 155px;
        overflow:auto;
      }
      #flickable1 ul {
        list-style: none;
        width:854px;
        margin: 0;
        padding: 5px;
      }
      #flickable1 ul li {
        background-color: #EEE;
        border: 1px solid #CCC;
        height: 100px;
        width: 100px;
        margin: 5px;
        padding: 5px;
        float: left;
      }
      #flickable1 .ui-flickable-container {
        cursor: pointer;
      }

ent 2
ent 2
What
       
td
What
and
the
Content 2with
Car

JavaScript

/*
 * jQuery.flickable v1.0b3
 *       Corrected to correspond to version 1.6.x
 *
 * Copyright (c) 2010 lagos
 * Dual licensed under the MIT and GPL licenses.
 *
 * http://lagoscript.org
 */
(function($, window, Math, undefined) {

    var flickable, 
        document = window.document,

        // Whether browser has touchScreen
        touchDevice = /iphone|ipod|ipad|android|blackberry/,

        isAndroid = /android/.test(navigator.userAgent.toLowerCase()),

        // Check if the target node is not needed to cancel default action.
        specialNodes = /^(input|textarea|select|option|button|embed|object)$/,
        specialNodesForTouch = new RegExp('^(input|textarea|select|option|button|embed|object|a' + (isAndroid ? '' : '|img') + ')$');

    // Inspired by jQuery UI
    $.fn.flickable = flickable = function(options) {
        if (typeof options === "string") { // method call
            var args = Array.prototype.slice.call(arguments, 1),
                returnValue = this;

            this.each(function() {
                var instance = $.data(this, 'flickable'),
                    value = instance && $.isFunction(instance[options]) ?
                        instance[options].apply(instance, args) : instance;

                if (value !== instance && value !== undefined) {
                    returnValue = value;
                    return false;
                }
            });

            return returnValue;
        } else {
            return this.each(function() {
                var instance = $.data(this, 'flickable');

                if (instance) {
                    $.extend(true, instance.options, options)
                    instance.init();
                } else {
                    $.data(this, 'flickable', new flickable.prototype.create(options, this));
                }
            });
        }
    };

    flickable.prototype = {
        options: {
            cancel: null,
            disabled: false,
           ...