JSFiddle - React, Tailwind, and code Playground

by David Rodriguez

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centrado vertical con FlexBox</title>
</head>
<body>
<header>
    <div class="container">
     
      <div class="uno">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam recusandae sunt consequuntur deserunt totam, minima voluptas harum rerum assumenda, optio quaerat similique cumque. Expedita rerum maiores adipisci excepturi eaque distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam recusandae sunt consequuntur deserunt totam, minima voluptas harum rerum assumenda, optio quaerat similique cumque. Expedita rerum maiores adipisci excepturi eaque distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam recusandae sunt consequuntur deserunt totam, minima voluptas harum rerum assumenda, optio quaerat similique cumque. Expedita rerum maiores adipisci excepturi eaque distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam recusandae sunt consequuntur deserunt totam, minima voluptas harum rerum assumenda, optio quaerat similique cumque. Expedita rerum maiores adipisci excepturi eaque distinctio.</p>	
      </div>
      
      <div class="dos">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam recusandae sunto.</p>
      </div>
      
      <div class="tres">
        <p>Lorem.</p>
      </div>
      
      
    </div>
  </header>
  
</body>
</html>

CSS

header .container {
  display:flex;
  align-items: center;
  
}

.uno, .dos, .tres {
  padding: 10px;
  margin: 0 30px ;
  
}


.uno {
  background: lightblue;
  
}

.dos {
 	background: lightgreen; 
}

.tres {
 	background: red;
}