JSFiddle - React, Tailwind, and code Playground

by Diego Betto

HTML

<nav class="pagedMenu">
       <ul style="font-size: 28px;">
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>
      </ul>
    </nav>

    <div id="pagination">
        <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
        <a href="#" id="nextPage" class="hidden">Next</a>
        <span id="msg"></span>
    </div>

CSS

.hidden {
        display: none;
    }

    body {
        font: normal 1.0em Arial, sans-serif;


    }


    nav.pagedMenu {
        color: red;
        font-size: 2.0em;
        line-height: 1.0em;
        width: 8em;
        position: fixed; 
        top: 50px;
    }

    nav.pagedMenu ul {

        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav.pagedMenu ul li {
        height: 1.0em;
        padding: 0.15em;
        position: relative;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        -webkit-transition: 
        -webkit-transform 220ms, background-color 200ms, color 500ms;
        transition: transform 220ms, background-color 200ms, color 500ms;
    }


    nav.pagedMenu ul li.hovered {
        -webkit-transform: translateX(1.5em);
        transform: translateX(1.5em);
    }
    nav ul li:hover a {
        transition: color, 1200ms;
        color: red;
    }
    nav.pagedMenu ul li span {
        display:block;
        font-family: Arial;
        position: absolute;
        font-size:1em;
        line-height: 1.25em;
        height:1.0em;
        top:0; bottom:0;
        margin:auto;
        right: 0.01em;
        color: #F8F6FF;

    }

    a {
        color: gold;
        transition: color, 1200ms;
        text-decoration: none;
    }

    #pagination, #prevPage, #nextPage {
        font-size: 1.0em;
        color: gold;    
        line-height: 1.0em;
        padding-top: 250px;
        padding-left: 5px;
    }

JavaScript

/* jQuery Storage API Plugin 1.7.4 https://github.com/julien-maurel/jQuery-Storage-API */
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof exports?require("jquery"):jQuery)}(function(e){function t(t){var r,i,n,o=arguments.length,s=window[t],a=arguments,u=a[1];if(2>o)throw Error("Minimum 2 arguments must be given");if(e.isArray(u)){i={};for(var f in u){r=u[f];try{i[r]=JSON.parse(s.getItem(r))}catch(c){i[r]=s.getItem(r)}}return i}if(2!=o){try{i=JSON.parse(s.getItem(u))}catch(c){throw new ReferenceError(u+" is not defined in this storage")}for(var f=2;o-1>f;f++)if(i=i[a[f]],void 0===i)throw new ReferenceError([].slice.call(a,1,f+1).join(".")+" is not defined in this storage");if(e.isArray(a[f])){n=i,i={};for(var m in a[f])i[a[f][m]]=n[a[f][m]];return i}return i[a[f]]}try{return JSON.parse(s.getItem(u))}catch(c){return s.getItem(u)}}function r(t){var r,i,n=arguments.length,o=window[t],s=arguments,a=s[1],u=s[2],f={};if(2>n||!e.isPlainObject(a)&&3>n)throw Error("Minimum 3 arguments must be given or second parameter must be an object");if(e.isPlainObject(a)){for(var c in a)r=a[c],e.isPlainObject(r)?o.setItem(c,JSON.stringify(r)):o.setItem(c,r);return a}if(3==n)return"object"==typeof u?o.setItem(a,JSON.stringify(u)):o.setItem(a,u),u;try{i=o.getItem(a),null!=i&&(f=JSON.parse(i))}catch(m){}i=f;for(var c=2;n-2>c;c++)r=s[c],i[r]&&e.isPlainObject(i[r])||(i[r]={}),i=i[r];return i[s[c]]=s[c+1],o.setItem(a,JSON.stringify(f)),f}function i(t){var r,i,n=arguments.length,o=window[t],s=arguments,a=s[1];if(2>n)throw Error("Minimum 2 arguments must be given");if(e.isArray(a)){for(var u in a)o.removeItem(a[u]);return!0}if(2==n)return o.removeItem(a),!0;try{r=i=JSON.parse(o.getItem(a))}catch(f){throw new ReferenceError(a+" is not defined in this storage")}for(var u=2;n-1>u;u++)if(i=i[s[u]],void 0===i)throw new ReferenceError([].slice.call(s,1,u).join(".")+" is not defined in this storage");if(e.isArray(s[u]))for(var c in s[u])delete...