JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
<div id="region-one"></div>
<div id="region-two"></div>
<div id="region-three"></div>
</div>


<ul>
    <li><input type="checkbox" name="region" value="region-one" id="toggle-region-one"><label for="toggle-region-one">Region one</label></li>
    <li><input type="checkbox" name="region" value="region-two" id="toggle-region-two"><label for="toggle-region-two">Region two</label></li>
    <li><input type="checkbox" name="region" value="region-three" id="toggle-region-three"><label for="toggle-region-three">Region three</label></li>
</ul>

CSS

#region-one, #region-two, #region-three {
  background-color: #666;
  height: 100px;
  width: 100px;
  display: inline-block;
}

#map .active {
background-color: red;
}

JavaScript

$(function(){
  $("#toggle-region-one").change(function() {
    $("#region-one").toggleClass("active", this.checked)
  }).change();
});

$('#region-one').on('click', function() {
    $('#toggle-region-one').trigger('click');
});

$(function(){
  $("#toggle-region-two").change(function() {
    $("#region-two").toggleClass("active", this.checked)
  }).change();
});

$('#region-two').on('click', function() {
    $('#toggle-region-two').trigger('click');
});

$(function(){
  $("#toggle-region-three").change(function() {
    $("#region-three").toggleClass("active", this.checked)
  }).change();
});

$('#region-three').on('click', function() {
    $('#toggle-region-three').trigger('click');
});