JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<script src="http://fonts.googleapis.com/css?family=Montserrat:400,700"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,300"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arti.us/clients/concept/insights/js/bootstrap.min.js"></script>
<script src="http://arti.us/clients/concept/insights/js/jquery.navgoco.js"></script>
<nav>

  <ul class="list-unstyled main-menu">
    <li><img src="http://arti.us/clients/concept/insights/images/cj-logo.png" class="img-responsive" /></li>
    <li>
      <hr style="width:50%; border-width:5px; margin-left:0" />
    </li>
    <!--Include your navigation here-->
    <li class="text-right">
      <!--<a href="#" id="nav-close">X</a>--></li>
    <li>
      <p>CJ Affiliate by Conversant&reg; (formerly Commission Junction) is the leading global affiliate marketing network, specializing in pay-for-performance programs that drive results for businesses around the world. The CJ Network helps to reach and
        connect with millions of online consumers every day by facilitating productive partnerships between advertisers and publishers. Drive more sales and expand your reach - experience the Network Effect with CJ.</p>
    </li>
    <li>
      <hr style="width:50%; border-width:5px; margin-left:0" />
    </li>
    <li>
      <p>© 2014 CJ Affiliate by Conversant&reg;.</p>
    </li>
    <!--<li><a href="index.html#2">How it Works <span class="icon"></span></a></li>
    <li><a href="index.html#3">Truth in Data<span class="icon"></span></a></li>
    <li><a href="index.html#4">Empowerment<span class="icon"></span></a>
      <ul class="list-unstyled">
        <li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
        <li...

CSS

@charset "UTF-8";
.glyphicon-lg {
  font-size: 3em
}

.blockquote-box {
  border-right: 5px solid #f1f1f2;
  margin-bottom: 25px
}

.blockquote-box .square {
  width: 100px;
  min-height: 40px;
  margin-right: 22px;
  text-align: center!important;
  background-color: #f1f1f2;
  padding: 20px 0
}

.square img {
  width: 60px;
}

.blockquote-box.blockquote-primary {
  border-color: #357EBD
}

.blockquote-box.blockquote-primary .square {
  background-color: #428BCA;
  color: #FFF
}

.blockquote-box.blockquote-success {
  border-color: #4CAE4C
}

.blockquote-box.blockquote-success .square {
  background-color: #5CB85C;
  color: #FFF
}

.blockquote-box.blockquote-info {
  border-color: #46B8DA
}

.blockquote-box.blockquote-info .square {
  background-color: #5BC0DE;
  color: #FFF
}

.blockquote-box.blockquote-warning {
  border-color: #EEA236
}

.blockquote-box.blockquote-warning .square {
  background-color: #F0AD4E;
  color: #FFF
}

.blockquote-box.blockquote-danger {
  border-color: #D43F3A
}

.blockquote-box.blockquote-danger .square {
  background-color: #D9534F;
  color: #FFF
}

.report {
  width: 100%;
  margin-bottom: 15px;
}

.activeBtn {
  background: #e1523d;
  border-color: #cc4b37
}

@font-face {
  font-family: "arrows";
  src: url("../fonts/arrows.eot");
  src: url("../fonts/arrows.eot?#iefix") format("embedded-opentype"), url("../fonts/arrows.woff") format("woff"), url("../fonts/arrows.ttf") format("truetype"), url("../fonts/arrows.svg#arrows") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "arrows" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "arrows" !important;
  font-style: normal...

JavaScript

jQuery(document).bind('keyup', function(e) {

  if (e.keyCode == 39) {
    jQuery('a.carousel-control.right').trigger('click');
  } else if (e.keyCode == 37) {
    jQuery('a.carousel-control.left').trigger('click');
  }

});

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 0
  })
  var url = document.location.toString();
  if (url.match('#')) {
    // Clear active item
    $('.carousel-inner div.item').removeClass('active');

    // Activate item number #hash
    $('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active');
  }

  $('#myCarousel').bind('slid.bs.carousel', function(e) {
    // Update location based on slide (index is 0-based)
    var item = $('#myCarousel .carousel-inner .item.active');
    window.location.hash = "#" + parseInt(item.index() + 1);
  })

  $('.report').click(function() {
    $('.report').removeClass("activeBtn");
    var getID = $(this).attr('data-id');
    $(this).addClass('activeBtn');
    $('.blockquote-box').removeClass('fadeInDown').addClass('fadeOutUp, hide');
    $('#' + getID).removeClass('fadeOutUp').removeClass('hide').addClass('fadeInDown')

  })

  $('.carousel').carousel({
      interval: false
    })
    /* $("#myCarousel").swiperight(function() {
        $("#myCarousel").carousel('prev');
      });
     $("#myCarousel").swipeleft(function() {
        $("#myCarousel").carousel('next');
     });*/

  //Navigation Menu Slider
  $('#nav-expander').on('click', function(e) {
    e.preventDefault();
    $('body').toggleClass('nav-expanded');
  });
  $('#nav-close').on('click', function(e) {
    e.preventDefault();
    $('body').removeClass('nav-expanded');
  });

  // Initialize navgoco with default options
  $(".main-menu").navgoco({
    caret: '<span class="caret"></span>',
    accordion: false,
    openClass: 'open',
    save: true,
    cookie: {
      name: 'navgoco',
      expires: false,
      path: '/'
    },
    slide: {
      duration: 300,
      easing: 'swing'
    }
 ...