JSFiddle - React, Tailwind, and code Playground

HTML

<div class="badge mini"></div>
<div class="badge mini shadow"></div>

<div class="badge small"></div>
<div class="badge small shadow"></div>

<div class="badge big"></div>
<div class="badge big shadow"></div>

CSS

body {
    background: black;
}

.badge {
    background: white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 10px;
}

.mini {
    height: 10px;
    width: 10px;
}

.small {
    height: 50px;
    width: 50px;
}

.big {
    height: 150px;
    width: 150px;
}

.shadow.mini {
    -mox-box-shadow: 0 0 1px white;
    -webkit-box-shadow: 0 0 1px white;
    box-shadow: 0 0 1px white;
}

.shadow.small {
    -mox-box-shadow: 0 0 3px white;
    -webkit-box-shadow: 0 0 3px white;
    box-shadow: 0 0 3px white;
}

.shadow.big {
    -mox-box-shadow: 0 0 5px white;
    -webkit-box-shadow: 0 0 5px white;
    box-shadow: 0 0 5px white;
}