JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="block-desk">
    <div class="block1x1 blueblock"><a class="txt-center" href="index.html"><img src="img/home.png" alt="Главная"></a></div>
    <div class="block2x2 blueblock"><h3 class="opacity-bg"></h3></div>
    <div class="block1x2 greenblock"><a href="gallery.html"></a><img src="img/.png" alt=""></div>
    <div class="block1x2 blueblock"></div>
    <div class="block1x1 orangeblock"><a class="txt-center" href="contacts.html"><img src="img/ct-bg.png" alt="Контакты"></a></div>  
    <div class="block1x1 blueblock"></div>  
    <div class="block1x1 greenblock"><a class="txt-center" href="#"><img src="img/lamp.png" alt=""></a></div> 
    <div class="block2x2 greenblock"><p>Сайт на переоформлении. Извините.</p><a href="how_to_order.html"></a></div> 
	<div class="block1x1 blueblock"><a href="#"><p class="txt-center"></a></div>
    <div class="block1x2 orangeblock"><a href="inf-elbox1k.html"><p class="txt-center"></a></div> 
    <div class="block1x2 blueblock"><a href="#"><p class="txt-center"></a></div> 
    <div class="block1x2 greenblock"><a href="#"><p class="txt-center">/p></a></div> 
    <div class="block1x1 whiteblock"></div> 
    <div class="block1x2 whiteblock"><a href="#"><p class="txt-center"></p></a></div>
    <div class="block2x2 blueblock"><span class="opacity-bg"><h3>УЗМ</h3></span><a href="#"></a></div>
    <div class="block1x1 greenblock"><a class="txt-center" href=""><img src="img/vilka.png" alt=""></a></div> 
    <div class="block1x1 whiteblock"></div> 
    <div class="block1x2 orangeblock"><a href="#"><p class="txt-center"></p></a></div>
    <div class="block2x2 blueblock"></div>
    <div class="block1x1 greenblock"></div> 
    <div class="block1x1 greenblock"></div> 
    <div class="block1x1 whiteblock"></div> 
    <div class="block1x2 whiteblock"></div> 
    <div class="block1x2 orangeblock"></div> 
    <div class="block1x2 orangeblock"></div> 
    <div class="clearblock"></div>     
</div>    
	<footer>footer</footer>
	
</body>

CSS

html, body {
height: 100%;
font-family: 'Monospace';
font-size:14px;
text-indent:0;
}

body {
width: 960px;
max-width: 960px;
background:rgb(65, 64, 66);
margin: 0 auto;
background: url(../img/greybg.png);
}


/* all blocks */
.block-desk {width: 960px;margin: 0;margin-top: 30px;position: relative;background: url(../img/bg11.png);color:#000;}
.content-desk {width: 960px;margin: 0;margin-top: 20px;position: relative;background: none;color:#fff;}
.block1x1 {width: 100px;height: 100px;margin: 10px;float: left;}
.block1x2 {width: 220px;min-width: 220px;height: 100px;margin: 10px;float: left;}
.block2x0 {width: 200px;height: auto;margin: 10px; padding: 10px;background:url(../img/whitebg.png);}
.block2x2 {width: 220px;height: 220px;margin: 10px;float: left;}
.block4 {width: 470px;}
.block6 {width: 700px;}
.lt-block {float: left;}
.rt-block {float: right;}
.wrap-block2x0 {height: auto;float: left;}
.clearblock {clear:both;}

/* color for blocks */
.blueblock {background:rgb(87, 191, 234);}
.orangeblock {background:rgb(214, 99, 39);}
.greenblock {background:rgb(152, 202, 70);}
.whiteblock {background:#fff;}
.opacity-bg {display: block;background: url(../img/whitebg.png);}
/* end blocks */


/* all images */
a.pic { line-height: 90px;padding:10px 0 0 0;display:inline-block;width: 100%;height: 100px;text-align: center;vertical-align: middle;}
a.foto-min img {border: 1px solid #000000; overflow:hiden;}
img a:hover {text-decoration: none;}
/* end images */




/* for texts */
a {text-decoration: none;color: #000;}
a:hover {text-decoration: underline;}
h2 {font-size:18px;line-height:19px;}
h3 {font-size:16px;line-height:20px;padding:15px 5px 15px 20px;}
.block-desk p {display:block;margin:10px;}
.content-desk p {margin:10px;}
.txt-center {text-align:  center;text-indent: 0;}
.big-text {padding:20px;line-height: 20px;font-size:18px;}
dl {margin-left:30px;}
dl dt {color:#98CA46;padding-left:20px;line-height: 30px;text-decoration: underline;}
.green-txt {color:...