JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagination-number--demo-multiple-numbers">
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
</div>

CSS

.pagination-number--demo-multiple-numbers {
	width: 100%;
	margin: 0 auto;
}
.pagination-number {
  font-size: 0.875rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 0.0625rem solid #ffffff;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.pagination-number--smaller {
  height: 2.25rem;
  line-height: 2.125rem;
}
.pagination-number--narrow-to-wide {
  min-width: 2rem;
  max-width: 2.75rem;
  width: 100%;
  margin: 0 auto;
}
.pagination-number--active {
  font-weight: 700;
  background-color: #eeeeee;
}