JSFiddle - React, Tailwind, and code Playground

by prodac

HTML

<div class="wp-pagenavi">
        <a id="previouspage" href="/_blog/Silly_Creature_of_Cyberspace/page/1/" style="display:inline">Previous</a>
        <span class="pagination" id="pagination">
            <a href="/_blog/Silly_Creature_of_Cyberspace/page/1/" title="1">
                <span class="current">1</span>
            </a>
            <span class="current">2</span>
            <a href="/_blog/Silly_Creature_of_Cyberspace/page/3/" title="3">
                <span class="current">3</span>
            </a>
            <a href="/_blog/Silly_Creature_of_Cyberspace/page/4/" title="4">
                <span class="current">4</span>
            </a>
            <a href="/_blog/Silly_Creature_of_Cyberspace/page/5/" title="5">
                <span class="current">5</span>
            </a>
            <span class="orphan">..</span>
            <a href="/_blog/Silly_Creature_of_Cyberspace/page/6/" title="6">
                <span class="current">6</span>
            </a>
        </span>
        <a id="nextpage" href="/_blog/Silly_Creature_of_Cyberspace/page/3/" style="display:inline">Next</a>
    </div>

CSS

.wp-pagenavi {
    width:100%;
    position:relative;
    height: 20px;
    margin: 0px;
    float: left;
    padding-top: 20px;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a span.current {
    text-decoration: none;
    color: #666666;
    font-weight: bold;
    display: inline;
    margin: 0px;
    padding-top: 7px;
    padding-right: 11px;
    padding-bottom: 7px;
    padding-left: 11px;
    background-color: #fff;
}
.wp-pagenavi a:hover {
    color: #000;
    text-decoration: underline;
}
.wp-pagenavi span.current {
    font-weight: bold;
    color: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background-color: #349ba8;
    padding: 7px 11px 7px 13px;
    margin: 0;
}

.wp-pagenavi span#pagination.pagination a {
    padding-left: 6px;
    padding-right: 6px;
}

.wp-pagenavi a:hover span.current {
    color: #000;
}

.wp-pagenavi #previouspage, .wp-pagenavi #nextpage  {
    text-transform: lowercase;
}

.wp-pagenavi #previouspage:before {
    content: "« ";
}

.wp-pagenavi #nextpage:after {
    content: " »";
}

.wp-pagenavi .orphan {
    display: none;
}

JavaScript

/***************************************************
 HIGHLIGHT V3
 ***************************************************/

// wraps word in class "hide"
jQuery.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'orphan';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.each(function() {
        innerHighlight(this, pat.toUpperCase());
    });
};

// wraps word in class "current"
jQuery.fn.current = function(pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'current';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes &&...