JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <h2>Using Pixel Patterns for Headers</h2>
  <p>Suspendisse elementum odio vel ligula pretium eu vehicula libero gravida. Vestibulum porta pellentesque mauris. Curabitur a enim ac nibh sodales blandit. Donec faucibus tempus erat, non blandit enim euismod vitae. Duis adipiscing erat at nisi semper consectetur. Quisque non vestibulum elit. Curabitur ac lorem urna. Nullam rutrum tristique erat a bibendum. Quisque dapibus lacus elementum turpis accumsan accumsan.</P>
</article>

CSS

body {background-color:gray;
}

article {
  width:600px;
  margin: 0 auto;
  background-color:white;
  padding:25px 20px 20px 20px;
  position:relative;
}

h2 {
  font-family: arial;
  font-size:25px;
    display:inline-block;
  padding:15px 0 0 0;
  line-height:1.5;
    margin-bottom:35px;
}

h2::before {
  content:'';
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0FDRkFCMDVFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0FDRkFCMDZFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQUNGQUIwM0VGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQUNGQUIwNEVGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvYCwlYAAABQSURBVHjalM8xDgAgCAPAlv//GYMGoxEROzFcFQhAMUJVH+8RxyiEpMoP3l7O1nHcx9feK15vKOG0EGHbRn5w+EOGj8ILb4UKnoUqtjQBBgC7kCccYRlZngAAAABJRU5ErkJggg==);
  background-repeat:repeat;
  width:100%;
  height:40px;
  position:absolute;
  opacity:.2;
  margin-left:-20px;
}