JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptas incidunt nulla necessitatibus rerum illum provident ea earum neque officia nam deserunt animi nostrum iusto velit distinctio, dolor eveniet voluptates.</p>
  
  <div class="my_gradient">
    <div class="bg_gradient"></div>
  </div>
  
  <footer>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi maiores dolore mollitia animi a fugit saepe perferendis unde, sequi debitis sint ratione, recusandae tempora quis culpa vitae sed assumenda!</p>
  </footer>
</body>

CSS

body{
  margin: 0;
  position: relative;
}

p{
  width: 80%;
  font-size: 50px;
  margin: 0;
}

footer{
  margin-top: 200px;
  position: relative;
}

.my_gradient{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  overflow: hidden;
  z-index: -1;
}

.bg_gradient{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  
  transform: translate(-400px, 400px);
  
  background: radial-gradient(circle, rgba(254,73,70,1) 0%, rgba(254,73,70,0) 70%);
  z-index: -1;
}