JSFiddle - React, Tailwind, and code Playground

by tania_poltava

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;
    z-index: 10;

}
.text-block {
    position: relative;
    z-index: 10;
    width: 70%;
    margin: 0 auto;
    padding: 50px;
}
.text-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #2b2525;
     z-index: -1;
}
h1 {
   position: relative;
    color: #fff;
    z-index: 12;
}