JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<div class="inner">
</div>
</div>

CSS

.outer {
  color:black;
  width: 400px;
  height:400px;
  border: 10px solid;
  
  border-color: red blue green yellow;
  position: absolute;
  margin: -200px  auto auto -200px;
  top:50%;
  left: 50%;
}
.inner{
  color:black;
  width: 100px;
  height:100px;
  border: 5px solid;
  border-color: red transparent green transparent;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -50px auto auto -50px;
}