JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<span class='state'></span>
<span class='state state-0'></span>
<span class='state state-1'></span>
<span class='state state-2'></span>

CSS

.state {
    width:16px;
    height:16px;
    display:inline-block;
    zoom:1;
    border:1px solid #555;
    -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
      -moz-box-shadow:    inset 0 0 10px rgba(255,255,255,0.6);
   -webkit-box-shadow:    inset 0 0 10px rgba(255,255,255,0.6);
   box-shadow:     inset 0 0 10px rgba(255,255,255,0.6), 0 0 2px rgba(0,0,0,0.6);
}
.state.state-0 {
    background:#F40000;
}
.state.state-1 {
    background:#FDFF27;
}
.state.state-2 {
    background:#279A19;
}