JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Нумерация страниц</title>
  <style>
  </style>
 </head> 
 <body>
  <div class="item-list">
   <ul class="pager">
    <li class="pager-current first"><span>1</span></li>
    <li class="pager-item"><a href="/node?page=1" title="На страницу номер 2">2</a></li>
    <li class="pager-item"><a href="/node?page=2" title="На страницу номер 3">3</a></li>
    <li class="pager-item"><a href="/node?page=3" title="На страницу номер 4">4</a></li>
    <li class="pager-next last"><a href="/node?page=1" title="На следующую страницу">›</a></li>
   </ul>
  </div>
  <p>Содержание</p>
 </body>
</html>

CSS

ul {
   background-color: #f0f0f0;
   width: 450px;
   height: 30px;
   list-style-type: none;
   display: flex;
   border-bottom: 3px solid #cccccc;
   align-items: center;
}

a {
  text-decoration: none;
  color: #8b363a;
}

li {
  padding: 7px;
  padding-left: 20px;
  padding-right: 20px;
  transition: 10.1s;
}

li:first-child{
  border-bottom: 3px solid #373737;
  background-color: #cccccc;
}

li:hover {
  border-bottom: 3px solid #373737;
  background-color: #cccccc;

}