JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<div class="accord-list first">
    <div class="accord-text">
        <div class="jflatTimeline">
            <div class="dates-bar">	<a class="prev">
															<i class="fa fa-angle-left"/>
														</a><a data-date="19/7/2015" style="margin-left: 0px">
															<span class="date">19/07</span>
															<span class="month">July</span>
														</a><a data-date="23/7/2015">
															<span class="date">23/07</span>
															<span class="month">July</span>
														</a><a data-date="26/7/2015">
															<span class="date">26/07</span>
															<span class="month">July</span>
														</a><a data-date="9/8/2015">
															<span class="date">09/08</span>
															<span class="month">August</span>
														</a><a data-date="16/8/2015">
															<span class="date">16/08</span>
															<span class="month">August</span>
														</a><a data-date="20/8/2015">
															<span class="date">20/08</span>
															<span class="month">August</span>
														</a><a data-date="23/8/2015">
															<span class="date">23/08</span>
															<span class="month">August</span>
														</a><a data-date="24/8/2015">
															<span class="date">24/08</span>
															<span class="month">August</span>
														</a><a data-date="25/8/2015">
															<span class="date">25/08</span>
															<span class="month">August</span>
														</a><a data-date="26/8/2015">
															<span class="date">26/08</span>
															<span class="month">August</span>
														</a><a data-date="27/8/2015">
															<span class="date">27/08</span>
															<span class="month">August</span>
														</a>
	<a data-date="31/8/2015">
															<span class="date">31/08</span>
															<span class="month">August</span>
														</a>
	<a class="noevent">No event found</a>
	<a class="next">
															<i...

CSS

.container-fluid, .inner-wrapper, .landbanner, .copy, .content, .hostelimg, .hostelprice {
    width: 100%;
    height: 100%;
}
.img-responsive {
    width: 100%;
    max-width: 100%;
    display: block;
}
.copy {
    padding: 20px;
}
.content {
}
.inner-wrapper {
    text-align: center;
    margin: 0 auto;
}
.hostel {
    width: 30.994%;
    float: left;
    padding: 5px;
    margin: 5px;
    border: 1px solid #CCC;
    background-color: #F9F9F9;
}
.hostel-header, .hostelprice {
    text-align: Center;
}
.accordcon {
    width: 100%;
    height: 100%;
    display: inline-block;
}
.dates-bar {
    border: solid 1px #e7e7e7;
    display: block;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 50px;
    position: relative;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fa-angle-left:before {
    content:"\f104";
}
.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dates-bar a.prev {
    left: 0;
}
.dates-bar a {
    display: block;
    height: 70px;
    width: 70px;
    color: #a2a2a2;
    text-align: center;
    display: inline-block;
    border-right: 1px solid #E7E7E7;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    transition: color .2s, transform .2s;
    -webkit-transition: color .2s, transform .2s;
    -moz-transition: color .2s, transform .2s;
    z-index: 0;
    font-size: 0;
    white-space: nowrap;
}
.dates-bar a.prev, .dates-bar a.next {
    position: absolute;
    top: 0;
    width: 50px;
    min-width: 0;
    font-size: 20px;
    background-color:...

JavaScript

(function ($) {
    $.fn.jflatTimeline = function (options) {

        /**------------------ SETTING PARAMETERS ------------------**/

        var timelinedates = new Array();
        var date_sort_asc = function (date1, date2) {
            // This is a comparison function that will result in dates being sorted in
            // ASCENDING order. As you can see, JavaScript's native comparison operators
            // can be used to compare dates. This was news to me.
            if (date1 > date2) return -1;
            if (date1 < date2) return 1;
            return 0;
        };

        var current_year = 0;
        var current_month = 0;
        var scroll_count = 2;
        var scrolled = 0;
        var scroll_time = 500;

        var month = new Array();
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";

        var config = {};
        if (options) {
            $.extend(config, options);
        }


        /**------------------ BEGIN FUNCTION BODY ------------------**/

        return this.each(function () {
            selector = $(this);

            if (options.scroll) scroll_count = parseInt(options.scroll);

            if (options.width) selector.css('width', options.width);

            if (options.scrollingTime) scroll_time = options.scrollingTime;

            /**------------------ INSERT  YEAR MONTH BAR------------------**/

            //
            if (!selector.children('.timeline-wrap').children('.event.selected').length) selector.children('.timeline-wrap').children('.event:first-child').addClass('selected');
            //This store the selected year to 'current_year'

            current_year = (new...