JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="myTimeline">
    </div>

CSS

/*
    Based on: https://jamespautz.com/vertical-css-timeline
    ---------------------------------------------------------------------
*/

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1em;
    color: #333;
    background-color: #EFEFEF;
    margin: 0;
}

h2,
h3,
h4,
h5 {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1;
}

ul#timeline-menu {
    height: 50px;
    text-align: center;
}

ul#timeline-menu li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul#timeline-menu li a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    padding: 10px;
    padding-top: 20px;
    color: black;
    font-weight: bold;
    border-bottom: 5px solid transparent;
}

ul#timeline-menu li a:hover {
    color: #EF693A;
    border-bottom: 5px solid #EF693A;
    font-weight: normal;
}

section#timeline {
    width: 750px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

section#timeline article {
    padding: 10px 0 0 15px;
    margin: 0 0 0 50px;
    position: relative;
    border-left: 2px solid #666;
}

section#timeline > article > div.panel {
    padding: 5px;
    margin: 0;
    border-style: none;
}
        /*section#timeline > article > div.panel:before { content: ''; position: absolute; top: 40px; left: 0px; width: 50px; height: 2px; background: #666; }*/
section#timeline > article > div.panel:last-child:after {
    display: none;
}

section#timeline > article > div.panel div.badge {
    display: inline-block;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 0;
}

section#timeline > article > div.panel div.badge:last-child {
    margin-left: -30px;
}

section#timeline div[class*="group"] {
    width: 75px;
    min-width: 75px;
 ...

JavaScript

(function($) {
    $.fn.albeTimeline = function(r, s) {
        var t = this;
        var u = $.extend({}, $.fn.albeTimeline.defaults, s);
        var v = $.fn.albeTimeline.languages[0][u.language];
        if (typeof(r) == 'string') {
            r = $.parseJSON(r)
        }
        if ($.isEmptyObject(r)) {
            console.warn(v.msgEmptyContent);
            return
        }
        r = r.sort(function(a, b) {
            return (u.sortDesc) ? (Date.parse(b['time']) - Date.parse(a['time'])) : (Date.parse(a['time']) - Date.parse(b['time']))
        });
        var w = $("<ul>").attr("id", "timeline-menu");
        var x = $("<section>").attr("id", "timeline");
        $.each(r, function(f, g) {
            var h = new Date(g.time).getFullYear();
            var i = $(x).find("div.group" + h);
            if (i.length === 0) {
                i = $("<div>").attr("id", ("year" + h)).addClass("group" + h).text(h);
                $(x).append(i);
                var j = $('<a>').attr("href", ("#year" + h)).text(h);
                w.append($("<li>").append(j))
            }
            var k = $('<div>').addClass("badge");
            k.text(fnDateFormat(g.time, u.formatDate, v));
            var l = $("<div>").addClass("panel").append(k);
            if (g.header) {
                var m = $("<div>").addClass("panel-heading");
                var n = $("<h4>").addClass("panel-title").text(g.header);
                m.append(n);
                l.append(m)
            }
            var o = $("<div>").addClass("panel-body");
            $.each(g.body, function(c, d) {
                var e = $('<' + d.tag + '>');
                $(d.attr).each(function() {
                    $.each(this, function(a, b) {
                        (a.toLowerCase() === 'cssclass') ? e.addClass(b) : e.attr(a, b)
                    })
                });
                if (d.content) e.text(d.content);
                o.append(e)
            });
            l.append(o);
           ...