JSFiddle - React, Tailwind, and code Playground

by Arina Gavrilova

HTML

<div class="puzzle">
  <div class="block5"></div>
  <div class="block7"></div>
  <div class="block3"></div>
  <div class="block1"></div>
  <div class="block4"></div>
  <div class="block6"></div>
  <div class="block8"></div>
  <div class="block2"></div>
</div>

CSS

html, body{
    margin:0;
    padding:0;
}
body{
    width:400px;
    height:300px;
}
.puzzle{
    width:300px;
    margin:0 auto;
    padding-top:5px;
}
.puzzle div{
    margin-right:5px;
    margin-bottom:5px;
}
.block1{
    float:left;
    width:70px;
    height:220px;
    background:#3498DB;
}
.block2{
    float:right;
    width:220px;
    height:70px;
    background:#3498DB;
}
.block3{
    height:70px;
    width:70px;
    background:#8e44ad;
}
.block4{
    float:left;
    width:70px;
    height:145px;
    background:#e74c3c;
}
.block5{
    float:right;
    width:70px;
    height:145px;
    background:#e74c3c;
}
.block6{
    float:right;
    width:70px;
    height:70px;
    background:#f1c40f;
}
.block7{
    float:right;
    width:145px;
    height:70px;
    background:#2ECC71;
}
.block8{
    float:left;
    width:145px;
    height:70px;
    background:#2ECC71;
}