JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <section class="main-content">
    <header class="head-content">

    </header>
  </section>
</body>

CSS

.main-content {
  background-color: #28AFB0;
  width: 99%;
  height : 1000px;
  text-align: center;
  margin: 10px auto;
}

.head-content {
  background-color: #1F271B;
  height: 90px;
  width: 95%;
  margin: 30px auto; /* Issue is here, if I increase margin, space is added between the top of the body and .main-content. CHANGE 30px TO HIGHER VALUE AND SEE */

}