JSFiddle - React, Tailwind, and code Playground

HTML

<html>
 <head> <link href="new  3.css" rel="stylesheet" type="text/css" />
 </head>
 <body>

 <div class="wrap">
      <span class="left-top"> <img src="1.jpg"></span>
      <span class="right-top"><img src="2.jpg"></span>
      <span class="left-bottom"><img src="3.jpg"></span>
      <span class="right-bottom"><img src="4.jpg"></span>

        
         
   <div class="header">
    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>
    </div>
   <div class="content">
    <h2>Опрос общественного мнения показал</h2>
    <p>98754398597549957947548y4iyi4uy58457y84975</p> 
   </div>
         </div>
   <div id="footer">&copy; Влад Мержевич</div>

 </body>
</html>

CSS

html{
height:100%;
}

body{
margin:0;
padding:0;
height:1000px;
width:1000px;
}


   .content {
   height: 790px;
     /* Отступ слева */
        text-align: center; 
    padding: 10px 10px 100px 10px; /* Поля вокруг текста */
background:#999;   
}
   #footer {
    background: #8fa09b; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
    clear: left; /* Отменяем действие float */
   }
   

.wrap{
width:623px;
margni:0 auto;
border:1px solid #ccc;    
position:relative;    
}


span{
display:block;
position:absolute;
width:100px;
height:100px;
}

.left-top{
top:0;
left:0;
}

.right-top{
top:0;
right:0;
}

.left-bottom{
bottom:0;
left:0;
}

.right-bottom{
bottom:0;
right:0;
}

.header{
margin:0px 100px;
background:#888    
}