JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask">
    <input id="bar-top" type="checkbox" checked>
    <label class="bar" for="bar-top"></label>
    <input id="bar-top-middle" type="checkbox">
    <label class="bar" for="bar-top-middle"></label>
    <input id="bar-bottom-middle" type="checkbox">
    <label class="bar" for="bar-bottom-middle"></label>
    <input id="bar-bottom" type="checkbox">
    <label class="bar" for="bar-bottom"></label>
</div>

CSS

input {
    display: none;
}

.bar {
    cursor: pointer;
    display: block;
    height: 200px;
    width: 100%;
}

:checked + .bar {
    background-color: rgba(160, 255, 97, 0.3);
}

.green-mask {
    position: absolute;
    width: 508px;
    top: 0;
    -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}