JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="first" />
<label for="first"></label>

<input type="checkbox" id="second" />
<label for="second"></label>

<input type="checkbox" id="third" />
<label for="third"></label>

CSS

input[type=checkbox] {
    position: absolute;
}

label {
    display: inline-block;
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.5em;
    background-color: #000000;
}

@media (max-width: 768px) and (orientation: portrait) {
    label {
        display: block;
    }
}