JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="bloco">
   <div class="titulo">nao fique desconectado</div>
   <div class="card">pague seu boleto ate o vencimento</div>
   
   <div class="titulo2">precisando regularizar seus debitos?</div>
   <div class="card2">
     <div class="numero">NUMERO1</div>
     <div class="numero">NUMERO2</div>
   </div>
</div>

CSS

*{
  box-sizing:border-box;
}
.bloco{
  width:300px;
  height:200px;
  border:2px solid red; /* apagar */
  position:absolute;
  left:calc(50% - (300px/2));
  top:calc(50% - (200px/2));
  
  text-align:center; /* alinha tudo no centro */
}

.titulo{
  font-size:30px;
}
.card{
  width:100%;
  background:blue;
  padding:10px;
  border-radius:10px;
}

.titulo2{
  margin-top:50px;
  font-size:20px;
}

.card2{
  margin-top:10px;
}

.numero{
  display:inline-block;
  margin:5px;
  padding:5px;
  border-radius:8px;
  background:aqua;
}