JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="box">

</div>

CSS

.box {
  border: 20px solid;
  border-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="20" fill="%23F004" /><rect x="80" width="20" height="100" fill="%230F04" /><rect y="80" width="100" height="20" fill="%2300F4" /></svg>') 20 / 20;
}

.box::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}