JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="timeline">

CSS

.timeline{
    position: relative;
    width: 100%;
    overflow:hidden;
}
.timeline-line{
    position: absolute;
    width: 90%;
    margin:0 5%;
    top: 75px;
    z-index: 10;
}
.timeline-event-marker,.timeline-spacer{
    display:block;
    float:left;
}
.timeline-event-marker{
    height: 11px;
    width: 11px;
    margin:1px 3px;
    background: #fff;
    border:2px solid #000;
}
.timeline-event-marker.active{
    background: #000;
}
.timeline-spacer{
    margin: 7px 0 6px;
    height: 3px;
    background: #ccc;
}
.timeline-events{
    
}
.timeline-event{
    float:left;
    position: absolute;
    width: 100%;
}
.timeline-event-title{
    margin: 0 0 75px;
}
.timeline-event-title h1{
    font-size: 2.4em;
    text-align: right;
    display:block;
}

JavaScript

(function($){
    $.widget("eb.timeline",{
        _events:[],
        _cur:0,
        l:{},
        options:{
            events: [],
            duration: 1500
        },
        _create:function(){
            var t = this;
            t.l.tl = $("<div />").addClass("timeline-line").appendTo(t.element);
            $.each(t.options.events,function(i,e){
                t._addEvent(e);
            });
            t.l.e = $("<div />").addClass("timeline-events clearfix").appendTo(t.element);
            t._updateSlides();
            $(window).resize(function(){
                t._updateTimeline();
                t._resize();
            });
        },
        _addEvent:function(e){
            this._events.push({
                title:e.title,
                date:new Date(e.date),
                details:e.details,
                marker:null,
                position:null,
                push:false
            });
        },
        _sortEvents: function(){
            this._events.sort(function(a,b){return a.date-b.date;});
        },
        _updateTimeline:function(){
            var t = this,
                width = t.l.tl.width(),
                now = new Date(),
                timespan = now - t._events[0].date,
                timePerPixel = timespan / width,
                imgWidth = 21.0,
                offset = -(imgWidth*timePerPixel);
                t.l.tl.html("");
                t.l.event = $("<span />").addClass("timeline-event-marker");
                t.l.spacer = $("<span />").addClass("timeline-spacer");
            $.each(t._events,function(i,e){
                var diff = 0, pos = 0;
                if(i != 0){
                    diff = e.date - t._events[i-1].date;
                    offset += diff;
                    pos = offset / timePerPixel;
                    if((t._events[i-1].marker.position().left + imgWidth) >= pos){
                        var push = Math.ceil(Math.abs(pos - (t._events[i-1].marker.position().left +...