JSFiddle - React, Tailwind, and code Playground

by 5p17f1Re

HTML

<div id="palette">
    <div class="white">&nbsp;</div>
    <div class="grey">&nbsp;</div>
    <div class="light-blue">&nbsp;</div>
    <div class="dark-blue">&nbsp;</div>
</div>

<div id="borders">
    <div id="row">
        <div id="content">
            CSS 3
        </div>
        <div id="rb"><div id="tc"></div><div id="v-run"></div></div>
        <div id="bb"><div id="lc"></div><div id="run"></div></div>
    </div>
</div>

<div id="borders-image">
    <div id="row">
        <div id="content">
            CSS + BG
        </div>
        <div id="rb-image"></div>
        <div id="bb-image"></div>
    </div>
</div>

CSS

.white {background:white;}
.grey {background:gainsboro;}
.light-blue {background: #00ABD3;}
.dark-blue {background: #0081AB;}

#palette {display:inline-table; margin-bottom:50px;}
#palette > div {width:20px; height:20px; float:left; overflow:hidden; border: 1px solid black;}

body{background: gainsboro; padding: 20px;}

#borders {
    width:314px;
    height:160px;
}

#content{
    width: 300px;
    height:150px;
    background: white;
    border: 2px solid;
    border-color:  #00ABD3;
    float: left;
}

#lc{
    border-color: #0081AB #0081AB  transparent transparent;
    border-style:solid;
    border-width:5px;
    height:0px;
    width:0px;
    float:left;
}
#bb {clear:both;}
#run {float:left; background-color:#0081AB; width:304px; height:10px;}

#rb {width:10px; height:154px; float:left;}
#tc{
    border-color: transparent transparent #0081AB #0081AB;
    border-style:solid;
    border-width:5px;
    height:0px;
    width:0px;
    float:left;
}
#v-run{float:left; background-color:#0081AB; width:10px; height:144px;}

#borders-image{margin-top:20px;
    width:314px;
    height:160px;
}
#rb-image {width:10px; height:154px; float:left; background-color:#0081AB;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAHN6w8ZAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAMUExURW6PmW+Omdzc3ACBq7Txm88AAABNSURBVHjaYmBgYmBmBAggEAEQQAzMDEwAAcTABGQAETNAAIE4IDYzMyMTQACBWGBxiAhUHEIyMwEEGEQlVAkzjAOWA+qFM8EcGBPIAQAw7ADn6U2uxAAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
}
#bb-image {float:left; background-color:#0081AB; width:100%; height:10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAHN6w8ZAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAMUExURW6PmW+Omdzc3ACBq7Txm88AAABOSURBVHjaYmBkZmBiAAggBiABEEAMTIzMAAHEwAxkABETQACBOCA2ExMDM0AAAQXBbAjJBBWHkEzMAAEGUQlVwgTjgOWYGBBMMAfGBHIANEQA57vOd8MAAAAASUVORK5CYII=);
background-repeat:no-repeat;
}