JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<table>
  <thead>
    <tr>
      <th class="position_cell">Position</th>
      <th>Player</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="position_cell">
        <span class="num">1</span>
        <span class="arrow arrow--up"></span>
      </td>
      <td>
        Albertola
      </td>
    </tr>
    <tr>
      <td class="position_cell"> 
        <span class="num">2</span>
        <span class="arrow arrow--static"></span>
      </td>
      <td>
        canando
      </td>
    </tr>
    <tr>
      <td class="position_cell"> 
        <span class="num">12</span>
        <span class="arrow arrow--down"></span>
      </td>
      <td>
        2n2u
      </td>
    </tr>
    <tr>
      <td class="position_cell"> 
        <span class="num">121</span>
        <span class="arrow arrow--up"></span>
      </td>
      <td>
        hugobauss
      </td>
    </tr><tr>
      <td class="position_cell"> 
        <span class="num">125</span>
        <span class="arrow arrow--up"></span>
      </td>
      <td>
        alvini
      </td>
    </tr>
  </tbody>
</table>

CSS

td,
th {
  padding: .3em;
}

th {
  text-align: left;
}

.position_cell {
  text-align: right;
  font-variant-numeric: tabular-nums;

}

td.position_cell {
  padding-right: .5em;
}

.arrow {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #aaa;
  border-radius: 50px;
  vertical-align: middle;
}

.num {
  margin-right: .2em;
}