JSFiddle - React, Tailwind, and code Playground

by Aniket Suryavanshi

HTML

<div class="main">
  <div class="layout">
    <div class="one">
    
    </div>
    <div class="oneS">

    </div>
    <div class="two">

    </div>
    <div class="twoS">

    </div>
    <div class="three">

    </div>
  
  </div>
</div>

CSS

.main {
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 100px;
}

.one {
  background-color: blue;
  width: 100px;
  height: 60px;
}
.oneS {
  background-color: blue;
  width: 43.5px;
  height: 43.5px;
  transform-origin: top left;
  transform: rotate(45deg);
}
.twoS {
   background-color: red;
  width: 45.5px;
  height: 45.5px;
  transform-origin: top left;
  transform: rotate(45deg);
}
.two {
  background-color: red;
  width: 100px;
  height: 60px;
  margin-left: -39px;
}
.three {
  background-color: blue;
  width: 100px;
  height: 60px;
   margin-left: -44px;

}