JSFiddle - React, Tailwind, and code Playground

by kalinin sergey

HTML

<div class="cells">
  <div class="cell">cell</div>
  <div class="cell cell2">
     <div class="round-area">
      content
    </div>
  </div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell"></div>
</div>

CSS

html, 
body{
  height: 100%;
  padding: 0;
  margin: 0;
}

.cells{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;  
    height: 100%;
}

.cell{
  width: calc(33.3% - 10px);
  height: calc(33.3% - 10px);
  background: red;
  margin: 5px;
  overflow: hidden;
}

.cell:nth-child(1) {
  width: 30%;
}
.cell:nth-child(2) {
  width: 60%;
}

.round-area{
  background: orange;
  /*border-radius: 50%;*/
  height: 100%;
  width: 100%;
  float: right;
}