JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="checkbox" name="f[]" id="f1" value="1"><label for="f1">Раз опция</label>
    <input type="checkbox" name="f[]" id="f2" value="2"><label for="f2">Два опция</label>
    <input type="checkbox" name="f[]" id="f3" value="3"><label for="f3">Три опция</label>
    <input type="checkbox" name="f[]" id="f4" value="4"><label for="f4">Четыре опция</label>
    <input type="checkbox" name="f[]" id="f5" value="5"><label for="f5">Пять опция</label>
    <input type="checkbox" name="f[]" id="f6" value="6"><label for="f6">Шесть опция</label>
    <input type="checkbox" name="f[]" id="f7" value="7"><label for="f7">Семь...</label>
</form>

CSS

form { border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 4px #888; display: table; }
input { display: none; }
label { display: block; margin: 2px; padding: 5px 20px; text-align: center; background: #ffe; border-radius: 5px; box-shadow: inset 0 0 4px #888; }
input:checked+label { background: #afa; }