JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<article class="w1">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w2 green">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w3 blue">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w4">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w5 green">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w6 blue">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w6 radius">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w6 hugeradius green">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="g"></div>
</article>

<article class="w6 circle blue">
    <div></div>
    <div class="a"></div>
    <div class="b"></div>
  ...

CSS

div
{
    width: 45px;
    height: 45px;
    
    margin: 10px;
    
    float: left;
}

.w6 > div
{
    border-width: 6px;
}

.w6.radius > div
{
    border-radius: 6px;
}

.w6.hugeradius > div
{
    border-radius: 12px;
}

.w6.circle > div
{
    border-radius: 100%;
}

.w5 > div
{
    border-width: 5px;
}

.w4 > div
{
    border-width: 4px;
}

.w3 > div
{
    border-width: 3px;
}

.w2 > div
{
    border-width: 2px;
}

.w1 > div
{
    border-width: 1px;
}

.green > div
{
    border-color: green;
}

.blue > div
{
    border-color: blue;
}

div
{
    border: solid 5px red;
}

div:after
{
    content: "solid";
    line-height: 45px;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.8em;
}

div.a{border-style: dotted;}
div.a:after{content:"dotted";}

div.b{border-style:dashed;}
div.b:after{content:"dashed";}
div.c{border-style: double;}
div.c:after{content:"double";}
div.d{border-style:groove;}
div.d:after{content:"groove";}
div.e{border-style:ridge;}
div.e:after{content:"ridge";}
div.f{border-style:inset;}
div.f:after{content:"inset";}
div.g{border-style:outset;}
div.g:after{content:"outset";}

article
{
    clear: both;
    margin-top: .5em;
    padding-top: .5em;
    border-top: solid 1px #ccc;
    overflow: hidden;
}

article:first-child
{
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}