JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<table id="leyendaMapa" style="width: 100%;">

  <thead>

    <tr>
      <th scope="col" style="width: 14.5663%; height: 21px;">Icono</th>
      <th scope="col" style="width: 55.8175%; height: 21px;">Empresa</th>
      <th scope="col" style="width: 29.6161%; height: 21px;">Total</th>
    </tr>

  </thead>

  <tbody>

    <tr>
      <th scope="row"><img src="https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/endesa.png" alt="Endesa" class="tableicon" /></th>
      <td>Endesa Generaci&oacute;n S.A.</td>
      <td class="rowamount">198.185.421,00 &euro;</td>
    </tr>

    <tr>
      <th scope="row"><img src="https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/fenosa.png" alt="Fenosa" class="tableicon" /></th>
      <td>Gas Natural Fenosa Generaci&oacute;n, S.L.U.</td>
      <td class="rowamount">77.953.360,00 &euro;</td>
    </tr>

    <tr>
      <th scope="row"><img src="https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/edp.png" alt="EDP" class="tableicon" /></th>
      <td>EDP Espa&ntilde;a, S.A.U.</td>
      <td class="rowamount">67.611.279,00 &euro;</td>
    </tr>

    <tr>
      <th scope="row"><img src="https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/viesgo.png" alt="Viesgo" class="tableicon" /></th>
      <td>Viesgo Generaci&oacute;n, S.L.</td>
      <td class="rowamount">52.956.075,00 &euro;</td>
    </tr>

    <tr>
      <th scope="row"><img src="https://storage.googleapis.com/gpes-static/mapa-pagos-por-capacidad/icons/iberdrola.png" alt="Iberdrola" class="tableicon" /></th>
      <td>Iberdrola Generaci&oacute;n, S.A.</td>
      <td class="rowamount">44.810.798,00 &euro;</td>
    </tr>

    <tr>
      <th scope="row">&nbsp;</th>
      <td><strong>Total</strong></td>
      <td class="rowamount"><strong>441.516.933,00 &euro;</strong></td>
    </tr>

  </tbody>

</table>
<p><small>© 2018 Greenpeace</small></p>
<!-- /TABLA DE DATOS -->

CSS

#leyendaMapa .tableicon {
          height: 25px;
        }

        #leyendaMapa .rowamount {
          text-align: right;
        }

        #leyendaMapa th[scope=row] {
          text-align: center;
        }

        #leyendaMapa {
          margin-top: 1em;
        }

        #leyendaMapa td {
          border-bottom: 1px solid #ccc;
        }