JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container{
            position: relative;
        }
        .horisontal-green,
        .horizontal-yellow{
            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-yellow{
            background: yellow;
            position: absolute;
            top: 20px;
            left: 60px;
        }
        .vertical-red:before {
            content: '';
            position: absolute;
            width: 20px;
            height: 50px;
            left: 0; top: 0;
            margin: -2px 0 0 -2px;
            border: 2px solid #000;
            border-bottom: none;
            background: #f00;
            z-index: 20;
        }