JSFiddle - React, Tailwind, and code Playground

HTML

<p id="paginglabel" class="element-invisible">Pagination</p>
<nav class="pagination" role="navigation" aria-labelledby="paginglabel">
  <span class="prev"><a href="" rel="prev"><span class="element-invisible">Go to the previous page </span>&laquo;</a></span>
  <span class="active"><a href=""><span class="element-invisible">You are currently on page </span>2</a></span>
  <span><a href=""><span class="element-invisible">Go to page </span>3</a></span>
  <span><a href=""><span class="element-invisible">Go to page </span>4</a></span>
  <span class="ellipses unavailable"><a href="">&hellip;</a></span>
  <span><a href=""><span class="element-invisible">Go to page </span>12</a></span>
  <span><a href="" ><span class="element-invisible">Go to page </span>13</a></span>
  <span class="next"><a href="" rel="next"><span class="element-invisible">Go to the next page </span>&raquo;</a></span>
</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;
}

/* custom pagination style ... can be anything */
.pagination {
  text-align: left;
}
.pagination > span {
  margin-right: -4px; /* removes gap between items: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
  color: #999;
}
.pagination > span > a {
  display: inline-block; /* gives even vertical space */
  *display:inline;
  padding: 0.75em 1em;
  color: #444;
  background: #eee;
  text-decoration: none;
}
.pagination > span.active > a {
  color: black;
  background: #ccc;
  cursor: default;
}
.pagination > span.unavailable a {
  color: #999;
  cursor: default; 
}