JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<label class="f-item" for="range_1"> <span class="label"></span>

    <input type="range" name="" id="range_1" />
</label>
<label class="f-item" for="range_2"> <span class="label"></span>

    <input type="range" name="" id="range_2" />
</label>
<label class="f-item" for="range_3"> <span class="label"></span>

    <input type="range" name="" id="range_3" />
</label>
<label class="f-item" for="range_4"> <span class="label"></span>

    <input type="range" name="" id="range_4" />
</label>

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: #ededed;
}
.f-item {
    display: block;
    vertical-align: top;
    position: relative;
    height: 108px;
    width: 60px;
    margin: 20px 0;
    background: #fbfbfb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.f-item:before, .f-item:after {
    content:' ';
    display: block;
    width: 12px;
    height: 12px;
    color: #1d91b8;
    font-weight: bold;
    font-size: 32px;
    line-height: 12px;
    position: absolute;
    left: 24px;
}
.f-item:before {
    background:...