JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<div class="b b1"></div>
<div class="b b2"></div>
<div class="b b3"></div>
<div class="b b4"></div>
<div class="b b5"></div>
<div class="b b6"></div>

CSS

.b1 { border-width: 20px; }
.b2 { border-width: 30px 20px 10px 20px; }
.b3 { border-width: 40px 20px 10px 20px; }
.b4 { border-width: 50px 30px 10px 30px; }
.b5 { border-width: 60px 30px 0 30px; }
.b.b6 { border-width: 60px 30px 0 30px; border-color: transparent; border-top-color: red; }

.b {
    box-sizing: border-box;
    border-style: solid;
    border-color: red yellow green blue;
    height: 60px;
    width: 60px;
    display: inline-block;
    margin: 0 20px 20px 0;
}