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="block1x2 greenblock"><p>/a></p><p><a href="how_to_order.html"></a></p><p><a href="inf_all.html"></a></p></div>
    <div class="block1x1 orangeblock"><p><a href="gallery.html"></a></p></div>  
    <div class="block1x1 blueblock"></div>  
    <div class="block1x2 blueblock"><p></p></div>
    <div class="block1x1 orangeblock"></div>

	    <div class="clearblock"></div>     
</div>     
<div class="content-desk">
	<div class="block2x0 rt-block"><h2>Обращаем внимание!</h2><p class="green-txt">/p></div>
<p class="big-text"></p>
<p class="big-text"><span class="green-txt"></p>
		<div class="block2x0 lt-block sky-txt big-text">Шаг №1</div>

	<div class="block6 rt-block">
		<h3></h3>
<p></p>
	</div>
		<div class="clearblock"></div>  	    
		<div class="block2x0 lt-block sky-txt big-text">Шаг №2</div>

	<div class="block6 rt-block">
		<h3></h3>
<p></p>
<p></p>
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>
<p></p>
	</div>
		<div class="clearblock"></div>  	    
		<div class="block2x0 lt-block sky-txt big-text">Шаг №3</div>
	<div class="block6 rt-block">
				<h3></h3>
<p></p>
	</div>
		<div class="clearblock"></div>  	    
		<div class="block2x0 lt-block sky-txt big-text">Шаг №4</div>
	<div class="block6 rt-block">
				<h3></h3>
<p></p>
<p></p>
	</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:...