JSFiddle - React, Tailwind, and code Playground

HTML

<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

CSS

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  background-size: cover;
  width: 50px;
  height: 50px;
}