JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="demandaC h90 flexv padding10 blackTheme">
  <div class=" flexh flexSB">
    <span>REE</span>
    <span>Demanda Energia</span>
    <span>lunes 19 dic</span>
  </div>
  <div class="titleColors">
    <table>
      <tr>
        <td>Prevista:</td>
        <td>P11</td>
        <td>REal:</td>
        <td>R12</td>
      </tr>  
      <tr>            
        <td>Programada:</td>
        <td>Pr12</td>
        <td>Defie:</td>
        <td>D3</td>
      </tr>
    </table>
  </div>
  <div class="blue flexG2">
  CC: Highcharts!!
  </div>
</div>

CSS

html, body{
  padding:0px;
  margin:0px;
  height:100%;
  width:100%;
  overflow:hidden;
  border:0px;
  font-family:"Segoe UI",Arial;
  font-size:3vw;
}

table{
  width:100%;
}

.h70{
  height:70%;
}
.h90{
  height:90%;
}

.margin10{
  margin:10px;
}
.padding10{
  padding:10px;
}

.flexv{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.flexh{
  display:flex;
}

.flexSA{
  justify-content:space-around;
}

.flexSB{
  justify-content:space-between;
}

.flexG2{
  flex-grow:2;
}

/*** COLORS **/
.blackTheme{
  background:#222;
  color:#bbb;
}

.titleColors{
  color:yellow;
}

.red{
  background:red;
  font-weight:bold;
}
.green{
  background:green;
}
.blue{
  background:blue;
}