JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="wrapper">
  <div class="container_top">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
    <div class="l4"></div>
    <div class="l5"></div>
  </div>
  тут другие блоки
</div>

CSS

.wrapper {
  width: 750px;
  height: 300px;
  margin: 0 auto;
  font: 14px/20px Arial, sans-serif;
}
.container_top {
  background-color: #00BFFF;
  border: 2px solid #eee;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
    height: 300px;
}
div[class^=l]{
  display:inline-block;
    border:1px solid black;
  background-color: black;
}
.l1{
  width:28%;
  height:40%;
}
.l2{
   width:33%;
  height:40%;;
}
.l3{
  width:37%;
  height:80%;
  float:right;
}
.l4{
 width:28%;
  height:40%;
}
.l5{
   width:33%;
  height:40%;
}