JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bg">
<div class="flex">
<div class="item a"></div>
<div class="item b"></div>
<div class="item c"></div>
</div>
<div class="flex1">
<div class="item1 a"></div>
<div class="item1 b"></div>
<div class="item1 c"></div>
<div class="item1 d"></div>
<div class="item1 e"></div>
<div class="item1 f"></div>
</div>
</div>
CSS
#bg {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 742px;
margin: 0 auto;
}
.flex {
display: flex;
flex-direction: column;
width: 30%;
height: 800px;
}
.item {
width: 225px;
transition: .2s;
cursor: pointer;
}
.item1 {
transition: .2s;
cursor: pointer;
}
.flex .a {
height: 195px;
margin-bottom: 6px;
background: url('http://skrinshoter.ru/i/160319/eEj33ZmE.png');
}
.flex .b {
height: 195px;
margin-bottom: 7px;
background: url('http://skrinshoter.ru/i/160319/apSoxs1s.png');
}
.flex .c {
height: 398px;
background: url('http://skrinshoter.ru/i/160319/QqzmjLFb.png') bottom right;
}
.flex1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 492px;
}
.flex1 .a {
width: 492px;
height: 195px;
background: url('http://skrinshoter.ru/i/160319/S7p6nLpo.png') bottom;
background-size: cover;
}
.flex1 .b, .flex1 .c, .flex1 .d, .flex1 .e {
width: 242px;
height: 195px;
margin-bottom: 0.5px;
}
.flex1 .b {
background: url('http://skrinshoter.ru/i/160319/hk8JDxd7.png') center;
}
.flex1 .c {
background: url('http://skrinshoter.ru/i/160319/tidrwTci.png') center;
}
.flex1 .d {
background: url('http://skrinshoter.ru/i/160319/VOS1sjot.png') center;
background-size: cover;
}
.flex1 .e {
background: url('http://skrinshoter.ru/i/160319/LiLph4j1.png');
}
.flex1 .f {
width: 492px;
height: 195px;
background: url('http://skrinshoter.ru/i/160319/MZkp7r7n.png') bottom;
}
.item:hover,
.item1:hover {
opacity: .95;
border-radius: 10px;
transition: .2s;
}