JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagination">
  <a class="active" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">11</a>
  <a href="#">12</a>
  <a href="#">13</a>
  <a href="#">14</a>
  <a href="#">15</a>
  <a href="#">16</a>
  <a href="#">17</a>
  <a href="#">18</a>
  <a href="#">19</a>
  <a href="#">20</a>
</div>

<br>

<div class="pagination" dir="rtl">
  <a href="#">40</a>
  <a href="#">39</a>
  <a href="#">38</a>
  <a href="#">37</a>
  <a href="#">36</a>
  <a href="#">35</a>
  <a href="#">34</a>
  <a href="#">33</a>
  <a href="#">32</a>
  <a href="#">31</a>
  <a href="#">30</a>
  <a href="#">29</a>
  <a href="#">28</a>
  <a href="#">27</a>
  <a href="#">26</a>
  <a href="#">25</a>
  <a href="#">24</a>
  <a href="#">23</a>
  <a href="#">22</a>
  <a href="#">21</a>
</div>

CSS

body {
  font-family: sans-serif;
}

.pagination {
   width: 50%;
   padding: 10px;
   outline: 1px solid #ccc;
   white-space: nowrap;
   overflow: hidden;
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
}

.inner {
  display: inline;
}

.pagination a {
  /*display: inline-block;*/
  margin: 0 3px;
  padding: 5px 10px;
  text-decoration: none;
  color: #000;
}

.pagination a:hover,
.pagination a.active {
  background: orange;
  color: #fff;
}