JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class="rect1"><a href="/#"><img src="http://i48.fastpic.ru/big/2013/0611/1f/699eb8e701da9746d2c61b6efef2ee1f.png" width="329" height="204" alt="img_1"></a></div>
<div class="rect3"><a href="/#"><img src="http://i47.fastpic.ru/big/2013/0611/4c/6c8923967da5be4f06d635d5a3fb0c4c.png" width="358" height="421" alt="img_3"></a></div>
<div class="rect5"><a href="/#"><img src="http://i48.fastpic.ru/big/2013/0611/11/d064f41d6831d6eeed0a9aabe71e8b11.png" width="349" height="175" alt="img_5"></a></div>
<div class="rect2"><a href="/#"><img src="http://i46.fastpic.ru/big/2013/0611/d9/c9bfc4c7a3d0fdf6ca98320cf4ba60d9.png" width="329" height="327" alt="img_2"></a></div>
<div class="rect4"><a href="/#"><img src="http://i47.fastpic.ru/big/2013/0611/e8/f01f04b5dc95a52850a57d4b971b67e8.png" width="358" height="108" alt="img_4"></a></div>
<div class="rect6"><a href="/#"><img src="http://i46.fastpic.ru/big/2013/0611/93/7a37947f2aad8bd8d9ebfd1622469c93.png" width="349" height="171" alt="img_6"></a></div>
<div class="rect7"><a href="/#"><img src="http://i48.fastpic.ru/big/2013/0611/b0/ded6b2a17f4b998c192e2d6f2a8c90b0.png" width="349" height="183" alt="img_7"></a></div>
</div>

CSS

body{background:#CCC;}
#container{
    width: 1036px;
    height: 550px;
    margin: 0 auto;}

.rect1 {
    width:329px;
    float: left;}

.rect5 {
    width:349px;
    float: right;
	position: relative;
    top: -421px;}

.rect3 {
    width:358px;
    margin: 0 349px 0 329px;}
	
.rect2 {
    width:329px;
    float: left;
	position: relative;
    top: -217px;
	}
	
.rect6 {
    float: right;
    position: relative;
    right: -349px;
    top: -354px;
    width: 349px;
	}
	
.rect7 {
    float: right;
    position: relative;
    top: -354px;
    width: 349px;
	}

.rect1 a:hower {
    background: url('http://i46.fastpic.ru/big/2013/0611/ca/b2fcd25ba972d661d5f9ba49ac3138ca.png');}