JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="bg"></div>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi illo iure beatae dolor obcaecati, aperiam eligendi nulla tempora est impedit natus sapiente nostrum placeat. Dignissimos quibusdam quaerat, veniam fugit officia.</p>
  </div>
</section>
<section>
  <div class="bg"></div>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi illo iure beatae dolor obcaecati, aperiam eligendi nulla tempora est impedit natus sapiente nostrum placeat. Dignissimos quibusdam quaerat, veniam fugit officia.</p>
  </div>
</section>
<section>
  <div class="bg"></div>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi illo iure beatae dolor obcaecati, aperiam eligendi nulla tempora est impedit natus sapiente nostrum placeat. Dignissimos quibusdam quaerat, veniam fugit officia.</p>
  </div>
</section>

SCSS

* {margin: 0;padding: 0;}
section {
  position: relative;
  padding: 3em;
  
 .bg {
    background: #f0a;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: skewY(6deg);
    //z-index: 1
  }
  .content {
    position: relative;
    //z-index: 9;
  }
}
section:nth-child(even) .bg {background: #ccc}