JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="horizontal-yellow1"></div>
  <div class="vertical-red"></div>
  <div class="horisontal-green"></div>
  <div class="vertical-blue"></div>
  
    <div class="horizontal-yellow2"></div>
</div>

CSS

.container{
            position: relative;
        }
        .horisontal-green{
            width: 100px;
            height: 20px;
            border: 2px solid #000;
        }
        .vertical-red,
        .vertical-blue{
            width: 20px;
            height: 100px;
            border: 2px solid #000;
        }
        .vertical-red{
            background: red;
            position: absolute;
            top: 0;
            left: 80px;
        }
        .horisontal-green{
            background: green;
            position: absolute;
            top: 60px;
            left: 60px;
        }
        .vertical-blue{
            background: blue;
            position: absolute;
            top: 0;
            left: 120px;
        }
        .horizontal-yellow1,
        .horizontal-yellow2{
            background: yellow;
            position: absolute;
            top: 20px;
            left: 60px;
            width: 50px;
            height: 20px;
            border: 2px solid #000;
        }
        .horizontal-yellow2{
            left: 110px;
            border-left: none;
        }