JSFiddle - React, Tailwind, and code Playground

by Skisak

HTML

<div class="pagination">
      <p class="counter"> Страница 8 из 17 </p>
      <ul class="pag">
        <li class="tab"><strong><a href="/index.php?limitstart=0" title="В начало">В начало</a></strong></li>
        <li class="tab"><strong><a href="/index.php?start=24" title="Назад">&larr;</a></strong></li>
        <li><strong><a href="/index.php?start=8" title="3">3</a></strong></li>
        <li><strong><a href="/index.php?start=12" title="4">4</a></strong></li>
        <li><strong><a href="/index.php?start=16" title="5">5</a></strong></li>
        <li><strong><a href="/index.php?start=20" title="6">6</a></strong></li>
        <li><strong><a href="/index.php?start=24" title="7">7</a></strong></li>
        <li>[<strong>8</strong>]</li>
        <li><strong><a href="/index.php?start=32" title="9">9</a></strong></li>
        <li><strong><a href="/index.php?start=36" title="10">10</a></strong></li>
        <li><strong><a href="/index.php?start=40" title="11">11</a></strong></li>
        <li><strong><a href="/index.php?start=44" title="12">12</a></strong></li>
        <li class="tab"><strong><a href="/index.php?start=32" title="Вперёд">&rarr;</a></strong></li>
        <li class="tab"><strong><a href="/index.php?start=64" title="В конец">В конец</a></strong></li>
      </ul>
    </div>

CSS

.pagination{
    display:block;
    margin:10px 0;
    border-top:1px #666 solid;
    color:#2e2e2e;
}

.counter {
    -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    border:solid 1px #666;
    display:block;
    margin:5px;
    padding:4px;
    float:left;
}
.pag {
    /*-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    border:solid 1px #666;*/
    margin:5px;
    /*padding:1px;*/
    display:block;
    float:left;
    font-size:12px;
}
.pag li {
    display:block;
    float:left;
    margin: 0 2px;
    padding:4px;
}
.pag li a {
    color:#2e2e2e;
    text-decoration:none;
}
/*.pag li a:hover{
    color:#f60;
    text-decoration:underline;
}*/
.tab strong {
    display:block;
    -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    border:solid 1px #666;
    padding:1px 2px 2px 2px;
}
.tab strong:hover {
    cursor:pointer;background:#f60;
}