JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<section>
  <div class="c1">Text 1</div>
  <div class="c2">Text 2</div>
  <div class="c3">Text 3</div>
  <div class="c4">Text 4</div>
</section>

CSS

div { text-align: center; line-height: auto; margin: 0; }
.c1 { font-size: 15px; background: yellow; }
.c2 { font-size: 50px; background: pink; }
.c3 { font-size: 25px; background: blue; }
.c4 { font-size: 15px; background: green; }
section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around;
  background: red;
}
body { margin: 0; }