JSFiddle - React, Tailwind, and code Playground

by jwilson3

HTML

<nav class="pager" role="navigation">
  <h4 class="pager__label element-invisible">Pagination</h4>
  <a class="pager__first" href=""><span class="element-invisible">Go to the first page</span></a>
  <a class="pager__prev" href="" rel="prev"><span class="element-invisible">Go to the previous page</span></a>
  <b class="pager__active"><span class="element-invisible">You are currently on page </span>2</b>
  <a class="pager__link" href=""><span class="element-invisible">Go to page </span>3</a>
  <a class="pager__link" href=""><span class="element-invisible">Go to page </span>4</a>
  <i class="pager__ellipsis"></i>
  <a class="pager__link" href=""><span class="element-invisible">Go to page </span>12</a>
  <a class="pager__link" href=""><span class="element-invisible">Go to page </span>13</a>
  <a class="pager__next" href="" rel="next"><span class="element-invisible">Go to the next page</span></a>
  <a class="pager__last" href=""><span class="element-invisible">Go to the last page</span></a>
</nav>

CSS

/* from system.base.css to visually hide information */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}
/* The pager direction glyphs are moved out of the HTML, for ease of modification by themers in the CSS, these could be easily reversed for RTL. */
.pager__first::before {
  content: " « "; /* LTR */
}
.pager__prev::before {
  content: " ‹ "; /* LTR */
}
.pager__next::before {
  content: " › "; /* LTR */
}
.pager__last::after {
  content: " » "; /* LTR */
}
.pager__ellipsis::before {
  content: " … ";
}

/* Pager skin */
.pager__link, .pager__active, .pager__ellipsis, .pager__next, .pager__prev, .pager__first, .pager__last {
  padding: .75em 1em;
  color: #666;
  background: #eee;
  text-decoration: none;
}
.pager {
  padding: .75em 0; /* match vertical padding of inline child elements */
}
.pager__link:hover, .pager__next:hover, .pager__prev:hover, .pager__first:hover, .pager__last:hover {
  text-decoration: none;
  background: #ddd;
  color: #000;
}
.pager__active {
   color: #000;
   background: #ccc;
}
.pager__link, .pager__active {
  margin-right: -4px; /* remove gap between items: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}