JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>гребаный сайт </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="block1"><img src="img/fon3.jpg" title="Режим">1</div>
 <div class="block2"><img src="img/fon3.jpg" title="Режим">2</div>
 <div class="block3"><img src="img/fon3.jpg" title="Режим">3</div>
 <div class="block4"><img src="img/fon4.jpg" title="Режим">4</div>
 <div class="block5"><img src="img/fon4.jpg" title="Режим">5</div>
 <div class="block6">6</div>
 <div class="block7">7</div>
 <div class="block8">8</div>
	 <div class="block9">9</div>
	 <div class="block10">10</div>
	 <div class="block11">11</div>
	 <div class="block12">12</div>
	 <div class="block13">13</div>
	 <div class="block14">14</div>
	 <div class="block15">15</div>
	 <div class="block16">16</div>
	 <div class="block17">17</div>
	 <div class="block18">18</div>
	 <div class="block19">19</div>
	 <div class="block20">20</div>
	 <div class="block21">21</div>
	 <div class="block22">22</div>
	 <div class="block23">23</div>
	 <div class="block24"><img src="img/online.gif" title="Режим"></div>
	 <div class="block25"><img src="img/online.gif" title="Режим"></div>
	 <div class="block26"><img src="img/online.gif" title="Режим"></div>
	 <div class="block27"><img src="img/online.gif" title="Режим"></div>
	 <div class="block28"><img src="img/online.gif" title="Режим"></div>
	 <div class="block29">29</div>
	 <div class="block30">30</div>
	 <div class="block31">31</div>
	 <div class="block32">32</div>
	 <div class="block33">33</div>
	 <div class="block34">34</div>
	 <div class="block35">35</div>
	 <div class="block36">36</div>
	 <div class="block37">37</div>
	 <div class="block38">38</div>
	 <div class="block39">39</div>
	 <div class="block40">40</div>
	 <div class="block41">41</div>
	 <div class="block42">42</div>
	 <div class="block43">43</div>
</body>
</html>

CSS

.block1
 {
 max-width:100%;
width: 447px;
height: 345px;
position: absolute;
background: ##D0FF00;
top:0px;
left:0px;
border:3px solid black;
display:table;
}
.block2
{
width: 447px;
height: 345px;
position: absolute;
background: #3AE2CE;
top:0px;
left:453px;
border:3px solid black;
}
.block3
{
width: 447px;
height: 345px;
position: absolute;
background: #5E2951;
top:0px;
left:906px;
border:3px solid black;
}
.block4
{
width: 600px;
height: 330px;
position: absolute;
background: #0FD611;
top:350px;
left:0px;
border:3px solid black;
}
.block5
{
width: 600px;
height: 330px;
position: absolute;
background: #242305;
top:350px;
left:753px;
border:3px solid black;
}
.block6
{
width: 142px;
height: 100px;
position: absolute;
background: #C0C0C0;
top:350px;
left:606px;
border:3px solid black;
}
.block7
{
width: 142px;
height: 118px;
position: absolute;
background: #C0C0C0;
top:456px;
left:606px;
border:3px solid black;
display:table;
}
.block8
{
width: 142px;
height: 100px;
position: absolute;
background: #C0C0C0;
top:580px;
left:606px;
border:3px solid black;
display:table;
}
		
		
	.block9
	{
	width: 120px;
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	top:3px;
	left:3px;
	border:3px solid gray;
	display:table;
	}
	.block10
	{
	width: 120px;
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	top:3px;
	left:456px;
	border:3px solid gray;
	display:table;
	}

	.block11
	{
	width: 120px;
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	top:3px;
	left:909px;
	border:3px solid gray;
	display:table;
	}

	.block12
	{
	width: 120px;
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	top:353px;
	left:3px;
	border:3px solid gray;
	display:table;
	}

	.block13
	{
	width: 120px;
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	top:353px;
	left:756px;
	border:3px solid gray;
	display:table;
	}

	.block14
	{
	width: 100px;
	height: 80px;
	position: absolute;
	background: #FFFFFF;
	top:3px;
	left:344px;
	border:3px solid...