JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div class="container">
            <div class="calendarSlider">
               <div class="slideWrapper">
                  <div class="slide">
                     <a data-date="01-2015" href="#"><span>Jan</span>2015</a>
                  </div>
                  <div class="slide">
                     <a data-dateval="02-2015" href="#"><span>Feb</span>2015</a>
                  </div>
                  <div class="slide">
                     <a data-dateval="03-2015" href="#"><span>Mar</span>2015</a>
                  </div>
                  <div class="slide">
                     <a data-dateval="03-2015" href="#"><span>Apr</span>2015</a>
                  </div>
               </div>
            </div>
            <!-- END CalandarSlider -->
         </div>

CSS

body{
  margin-top: 100px;
  background-color: #626262;
  text-align: center;
}

p {
  color: white;
  font-size: 20px; 
}

a {
  color: #fff;
  text-decoration: none;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 305px;
}

.calendarSlider {
  background-color: #fff;
  width: 100%;
  height: 100px;
  display: block;
  float: left;
  overflow: hidden;
  padding: 0 20px 0 20px;
  position: relative;
}

.calendarSlider .slideWrapper {
  width: 200%;
  height: 100%;
  background-color: #ccc;
  position: relative;
  padding: 0 0 0 5px;
}

.calendarSlider .slide {
  display: block;
  float: left;
  margin: 0 5px 0 0;
  text-align: center;
  cursor: pointer;
}

.calendarSlider .slide a {
  display: block;
  width: 70px;
  height: 100px;
  background-color: #5AAC7B;
  color: #fff;
  font-weight: normal;
  font-size: 22px;
}

.calendarSlider .slide span {
  display: block;
  padding-top: 12px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

.calendarSlider .slide a.slideActive {
  background-color: #84B154;
}

.sliderNavPrev, .sliderNavNext{
  position: absolute;
  top: 0px;
  display: block;
  background-color: #4BC1DD;
  width: 25px;
  height: 100%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  z-index: 9999;
  padding-top: 12%;
}

.sliderNavPrev{
  left: 0px;
}

.sliderNavNext{
  right: 0px;
}

JavaScript

$.fn.createCalendarSlider = function(){

	var defaults = {

	},
	settings = $.extend({}, defaults);

    return this.each(function () {
        var $slider = $(this);
        var $slideWrapper = $slider.find('.slideWrapper');        
        var slideWidth = '';

    	function setWidth(){
    		var numSlides = $slideWrapper.find($('.slide')).length;
    		slideWidth = $slideWrapper.find($('.slide')).outerWidth(true);

            var slideWrapperWidth = numSlides * slideWidth; 

    		console.log(slideWidth);

    		$slideWrapper.width(slideWrapperWidth);
    	}

    	function createNav(){

            var $prevBtn = $('<a/>', {
                'class' : 'sliderNavPrev',
                'href'  : '#',
                'html'  : '<',
            }).prependTo('.calendarSlider');
    		
            var $nextBtn = $('<a/>', {
                'class' : 'sliderNavNext',
                'href'  : '#',
                'html'  : '>',
            }).appendTo('.calendarSlider');


            $('.slide a').click(function () {
                if (!$(this).hasClass('slideActive')) {
                    $('.slide a').removeClass('slideActive');
                    $(this).addClass('slideActive');
                } else {
                    $(this).removeClass('slideActive');
                }
            });


            $prevBtn.on('click', function(e){
                e.preventDefault();
                $slideWrapper.animate({marginLeft: "+="+slideWidth}, 800);
                createPrevMonth();
            });

            $nextBtn.on('click', function(e){
                e.preventDefault();
                $slideWrapper.animate({marginLeft: "-="+slideWidth}, 800);
                createNextMonth();
            });

    	}

        function createPrevMonth(){


            var $slide = $('<div/>', {
                'class' : 'slide',
            }).prependTo($slideWrapper);

            $('<a/>', {
                'href'  : '#',
                'html'  : 'Month',
         ...