JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Структура</title>
	<link rel="stylesheet" href="css/main.css">
</head>
  <body>

                
                    <div class="row align-items-center justify-content-center">
                     <div class="my-flex-container-3">

      <div class="box-1">
        <h2>Box 1</h2>
        <p> Может когда-нибудь у меня получится разобраться в html и css
        </p>
      </div>
      <div class="box-2">
      
    
                </div>
            </div>
<div class="my-flex-container-4">

      <div class="box">
        <h2>Box 1</h2>
        <p> Проверяем блоки 2</p>
      </div>
      <div class="box">
        <h2>Box 2</h2>
         <p> Проверяем блоки 2</p>
      </div> 

                      
                    </div>

  

</div>

   


    <div class="flex-container">

      <div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->

  <p> 
    <a href="https://yandex.ru"><img src="img/иконка_whatsapp.png" alt="" style="width: 50px" ></a>
    &nbsp &nbsp
    <a href="https://yandex.ru"><img src="img/vk.png" alt="" style="width: 50px" ></a>
    &nbsp &nbsp
    <a href="https://yandex.ru"><img src="img/fb.png" alt="" style="width: 50px" ></a>
    &nbsp &nbsp
    <a href="https://yandex.ru"><img src="img/tg.png" alt="" style="width: 50px" ></a>
&nbsp &nbsp  
</p>  
</div>
 </div>
 
  </body>
</html>

CSS

body {
		
		padding: 0;
		margin: 0;
		color: #222222;
		
		height: 740px;
		font-size: ;
		background: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
}


 
.flex-container {
flex-direction: row;
margin-top: 10px; 
 
}
 


.my-flex-container-2 {
	display: flex;
 color: rgb(0, 6, 255); /* темный ультрамалиновый, фиолетовый*/
 margin-bottom: 30px;
		flex-direction:row;
	justify-content: center;
	align-items:center;
	}


 .my-flex-container-3{
display: flex;
align-items: center;
/* background-image: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; */
 background-repeat:no-repeat;

background-position: center 64px;
width: 1366px;
 height:990px;
	padding:16px;

margin:0 auto;
 }
 .my-flex-container-4{
	display: flex;
align-items: center;
 }
 .my-flex-container-3, .my-flex-container-4 div{
padding: 10px; border: 2px solid silver;
background-image: url(img/stok.jpg) no-repeat center top / cover;
}
	
	.box-1{
flex: 1;
border: 3px solid red;
	}
	.box-2{
flex: 2;
border: 3px solid green;
background: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
	}
	.box{
background-image: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) 
}

.box-1 {
	font color: white;
}

.H2 {color: white; /* синий цвет */}