JSFiddle - React, Tailwind, and code Playground

by will

HTML

<nav>
    <span class="cr"></span>
    <span class="atr"></span>
    <span class="belgo"></span>
    <span class="clarion"></span>
</nav>

CSS

body {
    background: #333;
}

nav {
    display: block;        
    position: absolute;
    right: 0; bottom: 50%; left: 0;
    height: 40px;
    background: #000;
    font-size: 0;
    text-align: center;
}

span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 14px 4px;
    border: solid 2px #000;
    border-radius: 20px;
    background: #FFF;
    -webkit-transition: box-shadow .2s;
    -webkit-transform: translate3d(0,0,0);
    cursor: pointer;
}

span:active {
    border-width: 4px;
    width: 4px;
    height: 4px;
}

.cr {
    box-shadow: 0 0 0 0 #af3139;
    background: #af3139;
}

.cr:hover {
    box-shadow: 0 0 0 2px #af3139;
}

.atr {
    box-shadow: 0 0 0 0 #205ca6;
    background: #205ca6;
}

.atr:hover {
    box-shadow: 0 0 0 2px #205ca6;
}

.belgo {
    box-shadow: 0 0 0 0 #f0c01e;
    background: #f0c01e;
}

.belgo:hover {
    box-shadow: 0 0 0 2px #f0c01e;
}

.clarion {
    box-shadow: 0 0 0 0 #a95cb0;
    background: #a95cb0;
}

.clarion:hover {
    box-shadow: 0 0 0 2px #a95cb0;
}