JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<script src="https://raw.github.com/gouz/moodular/master/jquery.moodular.js"></script>
<script src="https://raw.github.com/gouz/moodular/master/jquery.moodular.effects.js"></script>
<ul id="myCarousel">
<li class="rs-carousel-item">
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                </li>
                <li class="rs-carousel-item">
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                </li>
                <li class="rs-carousel-item">
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                </li>
                <li class="rs-carousel-item">
                    <div class="view view-tenth"><div class="mask">Hello World<p><a href="#" class="button thickbox">learn more</a></p></div></div>
                    <div class="view view-tenth"><div class="mask">Hello...

CSS

#myCarousel { 
        margin:0;
        padding:0;
        height:415px;
}
#myCarousel li {
        width:228px;
        height:128px;
        list-style:none;
        float:left;
        position:relative;
    padding: 0;
    margin: 0 5px;
}
.rs-carousel-item          { float: left; list-style: none; position: relative; }




.view { width: 228px; height: 128px; margin: 10px 5px; overflow: hidden; position: relative; text-align: center; cursor: default; background: #f0f0f0; z-index: 10; }

.view .mask,
.view .content { width: 210px; height: 110px; padding: 9px; color: #fff; position: absolute; overflow: hidden; top: 0; left: 0; }
.view img      { display: block; position: relative; }
.view h2       { text-align: center; position: relative; font-size: 14px; padding: 5px; margin: 0 0 5px; font-family: "Eurostile-Bol"; }
.view h2 span  { color: #898989; font-family: "Eurostile-Reg"; }
.view p        { font-size: 12px; position: relative; padding: 0; text-align: left; margin: 0 0 6px; line-height: 1.3; }
.view .stats   { text-align: center; font-family: "Eurostile-RegObl"; font-size: 13px; }
.view a.info   { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; }

JavaScript

/**
 * Copyright (c) 2010 Sylvain Gougouzian ([email protected])
 * MIT (http://www.opensource.org/licenses/mit-license.php) licensed.
 * GNU GPL (http://www.gnu.org/licenses/gpl.html) licensed.
 *
 * jQuery moodular controls by Sylvain Gougouzian http://sylvain.gougouzian.fr
 *
 * Requires: jQuery 1.3.2+     // http://www.jquery.com
 *             jQuery moodular plugin
 *             jQuery Mouse Wheel Plugin v3.0.2 // Copyright (c) 2009 [Brandon Aaron] (http://brandonaaron.net)
 *            jQuery UI 1.7.2
 *
 * Compatible : Internet Explorer 6+, Firefox 1.5+, Safari 3+, Opera 9+, Chrome 0.9+
 */
jQuery(function($){
    $.extend($.fn.moodular.controls, {
        keys: function(moodular){
            $(document).keydown(function(event){
                if ((event.keyCode == 39) || (event.keyCode == 40)) {
                    moodular._animate('next');
                }
                if ((event.keyCode == 37) || (event.keyCode == 38)) {
                    moodular._animate('prev');
                }
            });
            return false;
        },
        click: function(moodular){
            for (var i = 0; i < moodular.nbItems; i++) {
                $('> ' + moodular.opts.item, moodular.e).css('cursor', 'pointer').attr('rel', moodular._realpos(i)).click(function(){
                    moodular.locked = false;
                    moodular.moveTo($(this).attr('rel'));
                    return false;
                });
            }
        },
        stopOver: function (moodular) {
            moodular.e.parent().bind("mouseenter", function(){
                moodular.stop();
            }).bind("mouseleave", function () {
                if (!moodular.locked) { 
                    moodular.reanimate();
                } else { 
                    moodular.locked = false;
                }
            });
        },
        index: function(moodular){
            moodular.e.parent().parent().append('<ul class="moodular_itemList"></ul>');
      ...