JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="left">
    <div class="a">outline</div>
    <div class="b"></div>
</div>
    <div class="left">
    <div class="c">border</div>
    <div class="b"></div>
</div>
</div>

CSS

.wrap {
    margin: 50px;
}
.left {
    float: left;
    margin-left: 50px;
}
.a, .b, .c {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
.a {
    outline: 50px solid #876;
    background: #486;
}
.b {
    background: #027;
}
.c {
    border: 50px solid #f00;
    background: #385;
}