JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="text-block">
        <h1>Text with the biggest z-index and not covered by red stripe</h1>
    </div>
</div>

CSS

.wrapper {
 position: relative;
  background: #000;
  overflow: hidden;
}

.wrapper::after {
  content: "";
    position: absolute;
    width: 650px;
    height: 1500px;
    background: rgb(244,116,31);
    background: -moz-linear-gradient(top,  rgba(244,116,31,1) 0%, rgba(218,14,6,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4741f', endColorstr='#da0e06',GradientType=0 );
    transform: rotate(40deg);
    opacity: .6;
    right: 100px;
    top: -200px;

}

.text-block {
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 50px;
}

.text-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #2b2525;
}

h1 {
   position: relative;
    color: #fff;
    z-index: 1;
}