JSFiddle - React, Tailwind, and code Playground

HTML

<div class="figure">
  <div class="before"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et architecto aut ut earum soluta neque tenetur labore quae est maiores quod nulla quasi, blanditiis, quos, consequatur sequi in, ducimus qui.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ipsam quas asperiores soluta est dolorum, nostrum placeat sapiente animi iure expedita rerum incidunt quam nisi, quos inventore nesciunt ad quasi.
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio libero repellat harum magni eius nesciunt, deserunt magnam totam molestiae sit alias impedit minima rerum vitae, dolores voluptatem, ipsam rem culpa.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ipsam quas asperiores soluta est dolorum, nostrum placeat sapiente animi iure expedita rerum incidunt quam nisi, quos inventore nesciunt ad quasi.
    <p>Lorem ipsum dolor sit amet, consectetur adi
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ipsam quas asperiores soluta est dolorum, nostrum placeat sapiente animi iure expedita rerum incidunt quam nisi, quos inventore nesciunt ad quasi.
    <p>Lorem ipsum dolor sit amet, consectetur adi
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ipsam quas asperiores soluta est dolorum, nostrum placeat sapiente animi iure expedita rerum incidunt quam nisi, quos inventore nesciunt ad quasi.
    <p>Lorem ipsum dolor sit amet, consectetur adi</p> 
  </div>
  <div class="after"></div>
  
</div>

SCSS

body{
  background: #fff;
}
.figure{
  padding: 50px;
  .content{
    background: green;
    padding: 50px;
  }
  .before{
    position: relative;
    &:before{
      content:'';
      width: 50px;
      height: 50px;
      border-radius:50%;
      position: absolute;
      left: -25px;
      top: -25px;
      background: #fff;
    }
    &:after{
      content:'';
      width: 50px;
      height: 50px;
      border-radius:50%;
      position: absolute;
      right: -25px;
      top: -25px;
      background: #fff;
    }
  }
  .after{
    position: relative;
     &:before{
      content:'';
      width: 50px;
      height: 50px;
      border-radius:50%;
      position: absolute;
      left: -25px;
      bottom: -25px;
      background: #fff;
    }
    &:after{
      content:'';
      width: 50px;
      height: 50px;
      border-radius:50%;
      position: absolute;
      right: -25px;
      bottom: -25px;
      background: #fff;
    }
  }
}