JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div id="str">str <span class="dim"></span><span class="bright"></span></div>
<div id="sol">sol <span class="dim"></span><span class="bright"></span></div>
<div id="pre">pre <span class="dim"></span><span class="bright"></span></div>
<div id="voi">voi <span class="dim"></span><span class="bright"></span></div>

SCSS

body{
    background: #4c3f56;
    padding: 50px;
}

div{
    width: 100px;
    height: 100px;
    font-family: sans-serif;
    color: #eee;
    font-size: 30px;
    text-shadow: 0 3px 0 #000;
    background: #000;
    margin-right: 50px;
    margin-bottom: 50px;
    display: inline-block;
    border: 3px solid #000;
    position: relative;
    
    .bright{
        position: absolute;
        left: 0;
        bottom: 0;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        background: #fff;
        width: 40px;
        height: 20px;
    }
    
    .dim{
        position: absolute;
        right: 0;
        bottom: 0;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
        background: #fff;
        width: 40px;
        height: 20px;
    }
}

#str{
    background: #d2803a;
    .bright{
        background: #ff7e33;
    }
    .dim{
        background: #724722;
    }
}

#sol{
    background: #cb5d90;
    .bright{
        background: #ff2e8f;
    }
    .dim{
        background: #652744;
    }
}

#pre{
    background: #49a348;
    .bright{
        background: #48e04a;
    }
    .dim{
        background: #235a22;
    }
}

#voi{
    background: #4b92be;
    .bright{
        background: #42adf0;
    }
    .dim{
        background: #274254;
    }
}