JSFiddle - React, Tailwind, and code Playground

by morrison

HTML

<div id='dates'>
    <a href='#' id='arrow-left' class='arrow'>&lsaquo;</a>
    <a href='#' id='arrow-right' class='arrow'>&rsaquo;</a>
    <div class='wrapper'><span class='date'>0</span><span class='date'>1</span><span class='date'>2</span><span class='date'>3</span><span class='date'>4</span><span class='date'>5</span><span class='date'>6</span><span class='date'>7</span><span class='date'>8</span><span class='date'>9</span><span class='date'>10</span><span class='date'>11</span><span class='date'>12</span><span class='date'>13</span><span class='date'>14</span><span class='date'>15</span>
    </div>
</div>

CSS

#dates {
    width:280px;
    position:relative;
    border:1px solid #666;
    overflow:hidden;
}
#dates .wrapper {
    position:relative;
    width:950px;
    height:50px;
    max-height:50px;
    padding:0 15px;
}
#dates .date {
    margin:0;
    display:inline-block;
    padding:4px;
    width:41px;
    height:42px;
    vertical-align:middle;
    line-height:42px;
    border-left:1px solid #444;
    text-align:center;
}
#dates .arrow {
    position:absolute;
    top:0;
    display:block;
    width:15px;
    height:40px;
    line-height:40px;
    padding:5px 0;
    
    color:#444;
    text-align:center;
    text-shadow:0 1px 0 rgba(255,255,255,.33);
    text-decoration:none;
    font-weight:bold;
    
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
}
#arrow-left {
    left:0;
}
#arrow-right {
    right:0;
}

JavaScript

(function($) {
    var $dates = $('#dates .wrapper');

    $('#arrow-left').bind('click', function(e) {
        e.preventDefault();
        $dates.animate({
            'left':-250
        }, 400);
    });
    $('#arrow-right').bind('click', function(e) {
        e.preventDefault();
        $dates.animate({
            'left':+250
        }, 400);
    });
}(jQuery));