JSFiddle - React, Tailwind, and code Playground

by YesMarcos

HTML

<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
  <input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
  <input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
</div>

CSS

.hidden { display:none }
#checkboxes input[type="checkbox"].drm ~ label {
    float: left;
    cursor: pointer;
    vertical-align: middle;
    margin: 0px 2px 0px 8px;
    width: 37px;
    line-height: 37px;
    text-align: center;
    border: 1px #898989 solid;
    background-color: #FFF;
    color: #3F3F41;
    font-size: 13px;
    text-transform: uppercase;
}

#checkboxes input[type="checkbox"].drm ~ label:hover {
	border:1px #052245 solid;
	background-color:#052245;
	color:#FFF;
}

#checkboxes input[type="checkbox"]:checked.drm ~ label {
	border:1px #052245 solid;
	background-color:#052245;
	color:#FFF;
}