JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar-content checkbox">
  <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>
    
<div class="calendar-content checkbox">
   <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
   <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

CSS

.calendar-content {
  float: left;
  width: 100%;
  min-height: 112px;
  border: 1px solid #ccc;
  position: relative;
  display: block;
  margin-top: -1px;
}
    
.checkbox input[type="checkbox"] {
  margin-top: 1px;
  width: 20px;
  height: 20px;
  margin-left: -24px;
  padding-left: 24px;
}
    
    
.checkbox:checked ~ .calendar-content {
  background: #CCC;
}