JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo">
  <div class="white"></div>
  <div class="orange"></div>
  <div class="red"></div>
</div>

SCSS

.logo {
  position: relative;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  box-sizing: border-box;
  background-color: white;
    & > div {
    position: absolute;
    }
  /*   .red {
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    border-right: 4px solid black;
    background-color: #EA5664;
    }
    .orange {
    right: 0;
    top: 0;
    width: 27%;
    border-right: 4px solid black;
    background-color: #EA5664;
    } */
    .white {
    left: 27%;
    right: 27%;
    top: 0;
    width: 46%;
    border-right: 4px solid black;
    background-color: #EA5664;
    }
  }