JSFiddle - React, Tailwind, and code Playground

by Gaurav Gandhi

HTML

<div class="wrapper-container">

<div class="bgtop"></div>
<div class="bgbot"></div>

<div class="main-data">
  <h1>Hello World !</h1>
  <h3>This is created using two divs who is providing background</h3>
  <h4>And one div who carry the data</h4>
  <h6>Ignore my english, ty.</h6>
</div>
</div>

CSS

.wrapper-container{
    width: 100%;
    height: 100%;
    display:block;
    position: relative;
}

.main-data{
  position:absolute;
  top:0px;
  left:0px;
}

.bgtop{
  opacity : 0.5;
  padding:25%;
  background: linear-gradient(
    -90deg, 
    red 50%, 
    blue 50%
  );
}

.bgbot{
    opacity : 0.5;
    padding:25%;
    background: linear-gradient(
    -90deg, 
    green 50%,
    yellow 50%
  );
}