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__item pager__item--first" href=""><span class="element-invisible">Go to the first page</span></a>
  <a class="pager__item pager__item--prev" href="" rel="prev"><span class="element-invisible">Go to the previous page</span></a>
  <a class="pager__item pager__item--active" href=""><span class="element-invisible">You are currently on page </span>2</a>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>3</a>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>4</a>
  <span class="pager__item pager__item--ellipsis" role="presentation">&nbsp;</span>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>12</a>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>13</a>
  <a class="pager__item pager__item--next" href="" rel="next"><span class="element-invisible">Go to the next page</span></a>
  <a class="pager__item pager__item--last" href=""><span class="element-invisible">Go to the last page</span></a>
</nav>

<br><br><br>

<nav class="pager breadcrumb" role="navigation">
  <h4 class="pager__label element-invisible">Pagination</h4>
  <a class="pager__item pager__item--first" href=""><span class="element-invisible">Go to the first page</span></a>
  <a class="pager__item pager__item--prev" href="" rel="prev"><span class="element-invisible">Go to the previous page</span></a>
  <a class="pager__item pager__item--active" href=""><span class="element-invisible">You are currently on page </span>2</a>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>3</a>
  <a class="pager__item" href=""><span class="element-invisible">Go to page </span>4</a>
  <span class="pager__item pager__item--ellipsis" role="presentation">&nbsp;</span>
  <a class="pager__item" href=""><span class="element-invisible">Go to page...

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__item--first::before {
  content: "«"; /* LTR */
}
.pager__item--prev::before {
  content: "‹"; /* LTR */
}
.pager__item--next::before {
  content: "›"; /* LTR */
}
.pager__item--last::after {
  content: "»"; /* LTR */
}
.pager__item--ellipsis::before {
  content: "…";
}

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