JSFiddle - React, Tailwind, and code Playground

by GGaritaJ

HTML

<script src="https://github.com/GGaritaJ/ggAssistant"></script>
<script src="https://www.ggaritaj.com/"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="ggAssistant" />
    <meta name="author" content="Ing.Gerardo Garita Juarez" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-Xss-Protection" content="'1; mode=block' always">
    <meta http-equiv="X-Content-Type-Options" content="'nosniff' always">
    <title>jQuery Plugin ggAssistant</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  </head>

  <body>

    <div id="mainContainer">

      <!-- ASSISTANT : START -->
      <div class="customPagination">

        <!-- TOP ASSISTANT : START -->
        <div class="assistant">
          <ul id="topAssistant" class="assistant" assistant="assistantClass">
            <li class="prev"><a tabindex="1" title=""><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li class="page" onclick="console.log('page 1 clicked');"><a tabindex="2" title="" page-element="#pageOneId"><span class="badge">1</span><span class="glyphicon glyphicon-picture"></span>PAGE 1</a></li>
            <li class="page" onclick="console.log('page 2 clicked');"><a tabindex="3" title="" page-element="#pageTwoId"><span class="badge">2</span><span class="glyphicon...

CSS

#mainContainer {
  padding: 20px;
}

/*////////////////////////////////////////////
//  ggAssistant JS/CSS      PlugIn V1.2     //
//  Developed by: Ing.Gerardo Garita J.     //
//                FullStack Developer       //
//  email:  info@ggaritaj.com               //
//  date:       wednesday, 2018-07-25       //
//  last date:  wednesday, 2018-08-23       //
////////////////////////////////////////////*/

div.customPagination>div.paginate {
  opacity: 0;
  position: absolute;
  top: -10000px;
  left: -10000px;
}

div.customPagination>div.paginate.active {
  opacity: 1;
  position: inherit;
  top: 0px;
}

div.myTheme {
  border: solid 1px #DDDDDD;
  border-radius: 5px;
  padding: 15px 10px 15px 10px;
  margin: 0px auto;
  background: #F9F9F9;
}

div.assistant {
  margin: 5px 0px;
}

div.assistant ul.assistant {
  display: inline-block;
  padding-left: 0;
  margin: 0px auto;
  width: 100%;
  list-style: none;
}

div.assistant ul.assistant>li {
  float: left;
  background: #FFF;
}

div.assistant ul.assistant>li:hover {
  cursor: pointer;
}

div.assistant ul.assistant>li>a {
  position: relative;
  float: left;
  padding: 10px 5px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #6aa242;
  background-color: #ffffff;
  text-align: left;
  width: 100%;
  height: 100px;
  max-height: 120px;
  font-size: 12px;
  border-radius: 2px;
  border: 1px solid #dddddd;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently not supported by any browser */
}

div.assistant ul.assistant>li>a:hover {
  color: #E98A2C;
  border-color: #c6c6c6;
  text-decoration-style: double;
}

div.assistant ul.assistant>li>a:focus {
  outline: none;
}

div.assistant...

JavaScript

$(document).ready(function() {
  $("ul[assistant]").ggAssistant();
  //$("ul[assistant='assistantClass']").ggAssistant({
  //    startAt: 3,
  //    disable: [1, 2],
  //    hide: 4
  //});
  //$("ul").Assistant().Refresh();
  //var pos = $("ul#topAssistant").Assistant().GetPosition();
  //$("#topAssistant,#bottomAssistant").Assistant().SetPosition(2);
  //$("ul[assistant]").Assistant().SetPosition(2, false);// false: fire event click in li tag, default its true
  //$("[assistant]").Assistant().Hide(3);//array works too: .Hide([2, 3, 4]);
  //$("ul.assistant").Assistant().Show(2);//array works too
  //$(".assistant").Assistant().Disable(4);//array works too
  //$(".assistant").Assistant().Enable(4);//array works too
  //$("ul.assistant").Assistant().History('all');// .History(3)//lastest 3
});

//////////////////////////////////////////////
//  ggAssistant JS/CSS      PlugIn V1.2     //
//  Developed by: Ing.Gerardo Garita J.     //
//                FullStack Developer       //
//  email:  info@ggaritaj.com               //
//  date:       wednesday, 2018-07-25       //
//  last date:  wednesday, 2018-08-23       //
//////////////////////////////////////////////

;
(function($) {
  var _gghistory = [];
  if (!Array.prototype._cont) {
    Array.prototype._cont = function(element) {
      for (var i = 0; i < this.length; i++) {
        if (this[i] == element) {
          return true;
        }
      }
      return false;
    };
  }
  jQuery.fn.Assistant = function() {
    return this;
  };
  jQuery.fn.ggAssistant = function(options) {
    try {
      _ggSetSize(this);
      $(this).each(function(a, ul) {
        var _classAssistant = $(ul).attr("assistant");
        $(ul).find("li").on("click", function(e) {
          var itemClicked = $(this);
          if (!$(itemClicked).hasClass("disabled")) {
            if ($(itemClicked).hasClass("page")) {
              _gghistory.push([_classAssistant, $(ul).Assistant().GetPosition()]);
              var aTagInsted =...