JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<div class="green-container">
<div>
  <div class="first-container">
  <p>
  RPC
<br>
  (Retribution a Prix Coutant)
  </p>
  </div>
  <p style="padding-top: 30px;">
  actuellement
  </p>
</div>
<div>
  <div class=" second-container">
    <div>
      <p>
      Prime de distribution
      </p>
    </div>
    <div>
      <p>
     Prime de rachat versée par l'OFEN
      </p>
    </div>
    <div>
      <p>
      Revenus issus de la bourse d'electricite EEX Suisse
      </p>
    </div>
    
  </div>
    <p>
  a venir
  </p>
</div>
</div>

CSS

.green-container {
  color: white;
  text-align: center;
  text-transform: uppercase;
  width: 800px;
  height: 450px;
  background: #2DAB33;
}
.green-container>div {
  position:relative;
  width:50%;
  float:left;
}

.first-container {
  color: #666;
  border: 5px solid #666;
  width:200px;
  height: 200px;
  background-color:white;
  margin:150px auto 0 auto;

  text-align:center;
}



.second-container {
  border: none;
    height: 300px;
    width: 200px;
background-color:white;
    margin:50px auto;
      text-align:center;
  }
  .second-container div,
  .first-container 
  {
      display: flex;
  justify-content: center;
  align-items: center;
  }
  .second-container div:first-child {
    color:#71D161;
    height:50px;
    border: 5px solid #71D161;
          display: flex;
  justify-content: center;
  align-items: center;
  }
   .second-container div:nth-child(2) {
     color:green;
    height:105px;
    border: 5px solid green;
  }
  
  .second-container div:last-child {
    color: #5AB953;
    height:120px;
     border: 5px solid #5AB953;
  }