JSFiddle - React, Tailwind, and code Playground

by Pav KR

HTML

<div class="container">
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="body">
    <h2>My first project!</h2>
    <p>blah blah blah blah blah</p>
  </div>
  <div class="footer">
    <p>Blah footer</p>
  </div>
</div>

CSS

html,
body {height: 100%; background-color: pink}
body {padding: 40px 40px 0 40px; box-sizing: border-box; margin: 0}
p {margin-top: 0}
.container {height: 100%}

.header {background-color: #6F5997; height: 20%; border-radius: 15px 15px 0 0}
h1 {color: purple; margin: 0}

.body {background-color: #fff; height: 60%; border-radius: 0 0 15px 15px}
.body h2 {color: purple; margin-top: 0}

.footer {height: 20%}