JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg1"></div>
<div class="bg2"></div>
<div class="content">fhfghf gffg hghjghj</div>

CSS

*{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
    }
    .bg2{
      position: fixed;
      right:50%;
      top:400px;
      background: url(http://chebureks.ru/tests/img/bg2.png) no-repeat;
      width: 402px;
      height: 497px;
      margin-right:-500px;
      z-index: -1;
    }
    .bg1{
      position: fixed;
      left:50%;
      top:170px;
      width: 551px;
      height: 418px;
      background: url(http://chebureks.ru/tests/img/bg1.png) no-repeat;
      margin-left: -600px;
      z-index: -1;
    }
    .content{
      margin: auto;
      width: 600px;
      min-height: 100%;
      background: rgba(227,239,255, .5);
      border-width: 0 1px 0 1px;
      border-style: solid;
      border-color: #3639ff;


    }