JSFiddle - React, Tailwind, and code Playground

Agenda

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div class="fl-viewport-header">
  <span class="nav-left fl-menu-back">
    <i class="fa fa-chevron-left" aria-hidden="true"></i> <span class="btn-label">Back</span>
  </span>
  <span class="nav-title">
    <ul class="nav nav-tabs agenda-tabs" role="tablist">
    <li role="presentation" class="active"><a href="" role="tab" data-toggle="tab">Agenda</a></li>
    <li role="presentation"><a href="" role="tab" data-toggle="tab"><span class="icon fa fa-star"></span> My Agenda</a>
  </li>
  </ul>
  </span>
  <span class="nav-right fl-toggle-menu" data-target="#fl-app-menu"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="agenda">
    <div class="directory-wrapper">
      <div class="directory-list">
        <div class="directory-loading">
          <div class="directory-loading-screen"></div>
          <div class="directory-loading-body">
            <div class="loader-wrapper">
              <div class="loader"></div>
            </div>
            <p class="loading-text"></p>
          </div>
        </div>
        <form id="directory-search">
          <span class="fa fa-search"></span>
          <input id="search" type="search" placeholder="Search or Filter">
          <a href="#" class="btn btn-link" id="search-cancel">Cancel</a>
        </form>
        <div id="directory-filters">
          <!-- Filters / Search here -->
        </div>
        <div class="list-default"...

CSS

.lavalamp-object {
    background-color: #00BCD4;
    border-radius: 3px;
}
.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid rgba(127, 127, 127, 0.1);
  font-weight: 300;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #333;
  font-size: 1em;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 15%;
  text-align: center;
  padding: 0;
}

.fl-viewport-header .nav-left,
.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
}

.fl-viewport-header .nav-left {
  left: 0px;
  line-height: 44px;
}

.fl-viewport-header .nav-right {
  right: 0;
  width: 44px;
  font-size: 1.5em;
}

.nav-left .fa {
  width: 44px;
  height: 44px;
}

.fl-viewport-header .nav-left .btn-label {
  display: inline-block;
  padding-left: 22px;
  padding-right: 22px;
  text-indent: -9999px;
  width: 0;
}

.nav-tabs.agenda-tabs {
  margin-top: 4px;
  border: none;
  background: #FFFFFF;
  border: 1px solid #00BCD4;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.nav-tabs.agenda-tabs > li {
  line-height: 1em;
  margin-bottom: 0;
}

.nav-tabs.agenda-tabs > li > a {
  color: #00BCD4;
  margin-right: 0;
  line-height: 1.2em;
  padding: 10px;
  border: none;
  border-radius: 4px;
  text-shadow: none;
}

.nav-tabs.agenda-tabs > li > a:hover {
  background-color: transparent;
}

.nav-tabs.agenda-tabs > li.active > a,
.nav-tabs.agenda-tabs > li.active > a:focus,
.nav-tabs.agenda-tabs > li.active > a:hover {
  color: #fff;
  cursor: default;
  background-color: #00BCD4;
  border-radius: 4px;
  text-shadow: none;
  border: none;
}

@media screen and (min-width: 640px) {
  .fl-viewport-header {
    height: 55px;
    line-height: 54px;
    font-size: 1.2em;
  }
  .fl-viewport-header .nav-left,
  .fl-viewport-header...

JavaScript

// Arrow click to scroll
$.fn.dateSlider = function(customConfig){  
  var $dateSlider = $(this).first();
  if (!!$dateSlider.data('slider')) {
    return this;
  }
  var $agendaList = $dateSlider.next('ul');
  var dates = [];
  var $dates = [];
  
  var config = {
  	timestampAttr: 'data-timestamp',
    dateSliderFormat: 'dddd, MMM D',
  	transitionTime: 100,
    goToToday: true, // if FALSE, users will be taken to the first date
    goToDay: 0, // if goToDay is TRUE, this will be ignored
    afterRender: null, // function called after initial render
    afterDateSwitch: null // function called after switching dates
  };
  
	$.extend(config, customConfig);
  
  function  parseTimestamps() {
  	var attr = config.timestampAttr;
    var $dateItems = $agendaList.find('['+attr+']');
    var dateSliderHtml = [];
    
    $dateItems.each(function(){
    	var timestamp = moment($(this).attr(attr));
      var datestamp = timestamp.clone()
      	.hour(0).minute(0).second(0).millisecond(0);
      $(this).attr('data-timestamp-unix', timestamp.format('x'));
      $(this).attr('data-datestamp', datestamp.format('x'));
      if (dates.indexOf(parseInt(datestamp.format('x'),10)) < 0) {
      	dates.push(parseInt(datestamp.format('x'),10));
      }
    });
    dates.sort();
    
    for (var i = 0, l = dates.length; i < l; i++) {
    	dateSliderHtml.push(
      	'<li>'+moment(dates[i]).format(config.dateSliderFormat)+'</li>'
      );
      $agendaList.find('[data-datestamp="'+dates[i]+'"]').attr('data-day',i);
    }
    dateSliderHtml = dateSliderHtml.join('');
    $dateSlider.find('.date-scrollable').html(dateSliderHtml);
    $dates = $dateSlider.find('.date-scrollable > li').hide();
  }

  function prevDay () {
    var $now = $dates.filter(':visible');
    var prev = $now.index()-1;
    if (prev < 0) {
      prev = $dates.length-1;
    }
    goToDay(prev);
  }

  function nextDay () {
    var $now = $dates.filter(':visible');
    var next = $now.index()+1;
    if (next ===...