JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-desk">
    <div class="block1x1 whiteblock"><p>text texttexttext text text text text text</p></div> 
    <div class="block1x2 orangeblock"><a href="#">text</a></div>
    <div class="block1x1 greenblock"><a href="#">text</a></div> 
    <div class="block2x2 blueblock"><a href="#">text</a></div>
    <div class="block1x1 greenblock"><a href="#">text</a></div> 
    <div class="block1x1 whiteblock"><a href="#">text</a></div> 
    <div class="block1x2 whiteblock"><a href="#">text</a></div> 
    <div class="clearblock"></div>     
</div>    
<div class="content-desk">
    <div class="block1x1 whiteblock"><a href="#">text</a></div> 
    <div class="block1x2 orangeblock"><a href="#">text</a></div>
    <div class="block1x1 greenblock"><a href="#">text</a></div> 
    <div class="block2x2 blueblock"><a href="#">text</a></div>
    <div class="block1x1 greenblock"><a href="#">text</a></div> 
    <div class="block1x1 whiteblock"><a href="#">text</a></div> 
    <div class="block1x2 whiteblock"><a href="#">text</a></div> 
    <div class="clearblock"></div>     
</div>    
	<footer>footer</footer>

CSS

html, body {
height: 100%;
font-family: 'Monospace';
font-size:14px;
text-indent: 8px;
}
body {
width: 960px;
max-width: 960px;
background:rgb(65, 64, 66);
margin: 0 auto;
background: url(../img/greybg.png);
}
.block-desk {
width: 960px;
margin: 0;
margin-top:30px;
position: relative;
background:#ddadaf;
}
.block-desk p{
margin: 10px;
}

.block1x1 {
width: 100px;
height: 100px;
margin: 10px;
float: left;
}

.block1x2 {
width: 220px;
height: 100px;
margin: 10px;
float: left;
}

.block2x2 {
width: 220px;
height: 220px;
margin: 10px;
float: left;
}

.clearblock {clear:both;}
.blueblock {background:rgb(87, 191, 234);}
.orangeblock {background:rgb(214, 99, 39);}
.greenblock {background:rgb(152, 202, 70);}
.whiteblock {background:#fff;}

.content-desk {
width: 960px;
margin: 0;
margin-top:20px;
position: relative;
background:#997a8d;
}