JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<table class="pricing_table">
  <tbody class="pricing_table__tbody">
    <tr class="pricing_table__tr">
      <td class="pricing_table__td pricing_table__td--label">SMS</td>
      <td class="pricing_table__td">100</td>
      <td class="pricing_table__td">200</td>
      <td class="pricing_table__td">800</td>
      <td class="pricing_table__td">1600</td>
      <td class="pricing_table__td">3200</td>
    </tr>
    <tr class="pricing_table__tr">
      <td class="pricing_table__td pricing_table__td--label">Preço por SMS</td>
      <td class="pricing_table__td">0.14</td>
      <td class="pricing_table__td">00.095</td>
      <td class="pricing_table__td">00.091</td>
      <td class="pricing_table__td">00.089</td>
      <td class="pricing_table__td">00.085</td>
    </tr>
    <tr class="pricing_table__tr">
      <td class="pricing_table__td pricing_table__td--label">Preço Total</td>
      <td class="pricing_table__td">€14</td>
      <td class="pricing_table__td">€19</td>
      <td class="pricing_table__td">€73</td>
      <td class="pricing_table__td">€143</td>
      <td class="pricing_table__td">€273</td>
    </tr>
  </tbody>
</table>

CSS

.pricing_table {
  table-layout: fixed;
  width: 100%;
}

.pricing_table__tr:not(:last-child) {
 border-bottom: 1px solid #ddd; 
}

.pricing_table__td {
  padding: .6em .4em .6em .4em;
}

.pricing_table__td:first-child {
  padding-left: 0;
}

.pricing_table__td:nth-child(even) {
   background-color: #eee;
}

.pricing_table__td--label {
  font-weight: 900;
}