JSFiddle - React, Tailwind, and code Playground

HTML

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

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;
}

/* generic .inline-list class, resuable on menu, breadcrumbs etc */
.inline-list {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}
.inline-list li,
.inline-list a {
  display:inline-block;
  *display:inline;
}

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