JSFiddle - React, Tailwind, and code Playground

by Tim Ilmer

HTML

<div class="container">
    <span class="slickdot"></span>
    <span class="slickdot active"></span>
    <span class="slickdot"></span>
</div>

CSS

.container {
    padding: 20px;
}

.slickdot {
    height: 15px;
    width: 15px;
    background: lightgray;
    border-radius: 50px;
    display: inline-block;
    box-shadow:0px 0px 4px gray inset;
}

.slickdot.active {
    background-color: #41ABE5;
    box-shadow: inset 0px 0px 4px #888888;
}