JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<div class="wrapper">
  <div class="block block-top-left"></div>
  <div class="block block-top-right"></div>
  <div class="block block-bottom-left"></div>  
  <div class="block block-bottom-right"></div>  
</div>

SCSS

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 50%;
  height: 50%;
  position: relative;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    background-color: white;
  }
}

.block-top-left {
  background-color: red;
  
  &:before {
    bottom: 0;
    right: 0;
    width: 100px;
    height: 1px;    
  }
  
  &:after {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100px;
  }
}

.block-top-right {
  background-color: purple;
}

.block-bottom-left {
  background-color: maroon;
}

.block-bottom-right {
  background-color: blue;
  
  &:before {
    top: -1px;
    left: 0;
    width: 100px;
    height: 1px;    
  }
  
  &:after {
    top: 0;
    left: -1px;
    width: 1px;
    height: 100px;
  }
}