JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<body>
  <header>
    <div class="cnt">
      11111 11111 1111 111 111 111 1111  11 111 1111 11 11111  11111 1111 1111111 1 11 111 111 1111 1 1111 111 11 111 11 11111 11111 1111 111 11111 111 1111 111 1111 111 1 11111 1111 1 111 1111 1 11111 11 11111 111 1111 11 1111 1111 1111 111111 1111 111 1111 11111 1111 11 11111 1111 1111 111 1111 1 1111 111 11111 1 11111
    </div>
  </header>
  <main>
    <div class="cnt p33">
тЕКСТ какой-то текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс текс.
    </div>
    <div class="bgg">
      <div class="cnt">
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      </div>
    </div>
  </main>
  <footer>
    <div class="cnt">
      <div>Сopyright © 2022</div>
    </div>
  </footer>

CSS

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

header {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background: #ddd;
}
main {
  flex: 1 1 auto;
  width: 100%;
  height:100%;
}
footer {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background: #364553;
}
footer>div{
  padding: 20px 0 20px 0;
  color: #F7F9FB;
  font-size: 12px;
  text-transform: uppercase;
}
.bgg{
  background: #232328;
  height: 59vh;
}
.p33{
  padding: 30px 0 30px 0;
}
.cnt {
  margin: 0 auto;
  max-width: 600px;
  min-width: 280px;
  width: 90%;
}