JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div class="background-dark-brown p-2 light-brown">
  <div class="position-relative overflow-hidden">
    <div class="position-absolute overflow-hidden top-0 left-0 w-100 h-100 border-brown background-dark-brown"></div>
    <div class="position-absolute corner top right border-brown background-dark-brown"></div>
  </div>
</div>

CSS

.lightbrown {
  background-color: orange;
}

.border-brown {
  border: 1px solid brown;
}

.background-dark-brown {
  background-color: #643;
}

.corner {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.top {
  top: -15px;
}

.bottom {
  bottom: -15px;
}

.left {
  left: -15px;
}

.right {
  right: -15px
}

;