JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fon1"><img src="fon1.png"/></div>
<div class="fon2"><img src="fon2.png"/></div>
    <div class="wrapper">
    <div class="forest">
        <div class="main"></div>
    </div>
    </div>

CSS

div.fon1
{
    position: absolute;
    left: 0px;
}
div.fon2
{
    position: absolute;
    right: 0px;
}
div.forest
{
  position: absolute;
  border-radius: 5px;
  box-shadow: 0px 5px 15px #000;
  background-image: url("1.jpg");
  background-repeat: repeat;
  padding: 2%;
  margin: 0 auto;
 }
div.main
{
    width: 100px;
    height: 50px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 5px 15px #000;
}

.wrapper
{
    margin: 0 auto;
    width: 100px;
}