JSFiddle - React, Tailwind, and code Playground

HTML

<section class="advantages">
  <div class="advantages__content">
    <div class="advantages__item">
      <h4 class="advantages__headline">Lorem ipsum dolor sit amet</h4>
      <p class="advantages__text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A quo odio ducimus qui voluptatem, labore itaque fugit nemo veniam adipisci, autem laboriosam, assumenda in officiis error repellat. Quam, nisi, iste.
      </p>
    </div>
    <div class="advantages__item">
      <h4 class="advantages__headline">Magnam, sapiente eius facilis illo fuga vel</h4>
      <p class="advantages__text">
        Magnam, sapiente eius facilis illo fuga vel velit omnis unde libero recusandae, nisi ea! Labore, blanditiis vero harum veritatis illum voluptatem fugit totam molestias sunt minima nam, et odit, sequi.
      </p>
    </div>
    <div class="advantages__item">
      <h4 class="advantages__headline">Lorem ipsum dolor sit amet</h4>
      <p class="advantages__text">
        Culpa sint fugiat molestiae doloremque veniam, modi dolorum nobis unde dolores ut suscipit quisquam illo ullam aliquam cupiditate voluptate rerum qui animi autem quis odit, repellat quae assumenda. Accusantium, optio?
      </p>
    </div>
    <div class="advantages__item">
      <h4 class="advantages__headline">Lorem ipsum dolor sit amet</h4>
      <p class="advantages__text">
        Modi necessitatibus, ad commodi. Obcaecati maxime, error assumenda sint distinctio impedit, sunt dolore architecto officiis. Ducimus ipsam eius molestiae est, vitae architecto sed? Maxime ad cum natus eaque, suscipit enim?
      </p>
    </div>
    <div class="advantages__item">
      <h4 class="advantages__headline">Lorem ipsum dolor sit amet</h4>
      <p class="advantages__text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A quo odio ducimus qui voluptatem, labore itaque fugit nemo veniam adipisci, autem laboriosam, assumenda in officiis error repellat. Quam, nisi, iste.
      </p>
    </div>
...

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #00BCAD;
  color: #fff;
  font-family: sans-serif;
}

.advantages {
  border: 67px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 268 268'%3E%3Cdefs%3E%3Csymbol id='corner' viewBox='0 0 28 28'%3E%3Cpath d='M8.2,18.1,1.1,11a1.9,1.9,0,0,1,0-2.8L8.2,1.1a1.9,1.9,0,0,1,2.8,0l7.1,7.1a2.1,2.1,0,0,1,0,2.8L11,18.1A2.1,2.1,0,0,1,8.2,18.1Z' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cpath d='M8.8,27.2l-5-5a1,1,0,0,1,0-1.4l5-5a1,1,0,0,1,1.4,0l5,5a1,1,0,0,1,0,1.4l-5,5A1,1,0,0,1,8.8,27.2Z' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cpath d='M27.2,10.3l-5,5a1,1,0,0,1-1.4,0l-5-5a1,1,0,0,1,0-1.4l5-5a1,1,0,0,1,1.4,0l5,5A1,1,0,0,1,27.2,10.3Z' fill='none' stroke='%23fff' opacity='0.75'/%3E%3C/symbol%3E%3C/defs%3E%3Cline x1='67' y1='11' x2='201' y2='11' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cline x1='67' y1='257' x2='201' y2='257' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cline x1='11' y1='67' x2='11' y2='201' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cline x1='257' y1='67' x2='257' y2='201' fill='none' stroke='%23fff' opacity='0.75'/%3E%3Cuse width='28' height='28' transform='translate(1.5 1.5)' xlink:href='%23corner'/%3E%3Cuse width='28' height='28' transform='translate(266.5 1.5) rotate(90)' xlink:href='%23corner'/%3E%3Cuse width='28' height='28' transform='translate(266.5 266.5) rotate(180)' xlink:href='%23corner'/%3E%3Cuse width='28' height='28' transform='translate(1.5 266.5) rotate(-90)' xlink:href='%23corner'/%3E%3C/svg%3E") 25% round;
}

.advantages__content {
  display: flex;
  flex-wrap: wrap;
  margin: -40px;
}

.advantages__item {
  padding: 12px;
  width: 50%;
}

.advantages__headline {
  position: relative;
  padding-left: 26px;
  margin-top: 0;
}

.advantages__headline::before {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
 ...