JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="wrapper">
    <section class="blue">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus libero unde harum, ab, rerum suscipit repellendus quas, dolorum sequi animi, facere. Rerum aut ab sint tenetur mollitia dignissimos, ad commodi.
    </section>
  </div>

CSS

.wrapper {
      width: 700px;
      margin: 0 auto;
    }
    
    section {
      margin-top: 50px;
      position: relative;
      padding: 30px 20px;
      box-sizing: border-box;
    }
    
    section:before,
    section:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    section:before {
      background-color: lightblue;
      transform: rotate(5deg) skew(5deg);
    }
    
    section:after {
      background-color: CornflowerBlue;
      transform: rotate(4.5deg) skew(4.5deg) translate(1px, 4px);
    }