Pagination Footer

<div class="nuda-tbl-pgn">
  <table class="nuda-tbl-pgn__table">
    <thead>
      <tr>
        <th class="nuda-tbl-pgn__th">ID</th>
        <th class="nuda-tbl-pgn__th">Event</th>
        <th class="nuda-tbl-pgn__th">Time</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nuda-tbl-pgn__row">
        <td class="nuda-tbl-pgn__td">#1041</td>
        <td class="nuda-tbl-pgn__td">user.login</td>
        <td class="nuda-tbl-pgn__td">09:14</td>
      </tr>
      <tr class="nuda-tbl-pgn__row">
        <td class="nuda-tbl-pgn__td">#1042</td>
        <td class="nuda-tbl-pgn__td">file.upload</td>
        <td class="nuda-tbl-pgn__td">09:22</td>
      </tr>
    </tbody>
  </table>
  <div class="nuda-tbl-pgn__footer">
    <span class="nuda-tbl-pgn__info">Showing 1–2 of 48</span>
    <div class="nuda-tbl-pgn__controls">
      <button class="nuda-tbl-pgn__page nuda-tbl-pgn__page--disabled">‹</button>
      <button class="nuda-tbl-pgn__page nuda-tbl-pgn__page--active">1</button>
      <button class="nuda-tbl-pgn__page">2</button>
      <button class="nuda-tbl-pgn__page">3</button>
      <button class="nuda-tbl-pgn__page">›</button>
    </div>
  </div>
</div>

.nuda-tbl-pgn {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  background: #141414;
}

.nuda-tbl-pgn__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.nuda-tbl-pgn__th {
  padding: .5rem .75rem;
  text-align: left;
  color: #777;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.nuda-tbl-pgn__td {
  padding: .45rem .75rem;
  color: #cfcfcf;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.nuda-tbl-pgn__row:last-child .nuda-tbl-pgn__td {
  border-bottom: none;
}

.nuda-tbl-pgn__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .75rem;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.1);
}

.nuda-tbl-pgn__info {
  color: #555;
  font-size: .7rem;
}

.nuda-tbl-pgn__controls {
  display: flex;
  gap: 3px;
}

.nuda-tbl-pgn__page {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: #cfcfcf;
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s,color .12s;
}

.nuda-tbl-pgn__page:hover {
  background: rgba(255,255,255,.08);
}

.nuda-tbl-pgn__page--active {
  background: #e4ff54;
  border-color: #e4ff54;
  color: #141414;
  font-weight: 700;
}

.nuda-tbl-pgn__page--disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}