JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="main">
  <div class="center">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi adipisci commodi sint sit dignissimos quam deleniti vel sequi ratione natus ullam, vitae asperiores minus ipsam neque quod dolorum, debitis? Tenetur! <br>
  <br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea fuga temporibus, repudiandae nisi, tempora sequi eligendi repellendus mollitia incidunt laboriosam iste modi eveniet dolorem, consectetur voluptatem! Distinctio, dolorem ducimus beatae?</div>
  <div class="bottom">TSTING</div>
</div>

SCSS

body {
  margin: 0;
  padding: 0;
}
.main {
  background:red;
  height: 100vh;
  width: 100vw;
  
  display:flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;
  
  @media screen and (max-width:600px) {
    display: block;
  }
}

.center {
  background: blue;
  width: 100%;
  max-width: 500px;
  /* height: 100%; */
   @media screen and (max-width:600px) {
    display: block;
  }
}

.bottom {
  /* height: 100%; */
  background: yellow;
  width: 100%;
  text-align: center;
  padding: 1rem;
   @media screen and (max-width:600px) {
    display: block;
  }
}