JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</head>

<div class="container">
  <div class="row">
    <label class="HowItWorks-togglerDisplay" for="HowItWorks-toggler">
      <input class="HowItWorks-togglerCheckbox" id="HowItWorks-toggler" type="checkbox" checked="">
      <h4 class="HowItWorks-togglerTextLabel">Sound Masking</h4>
      <br>
      <div class="form-check form-switch">

        <div class="form-check custom-control custom-switch">
          <input type="checkbox" class="custom-control-input form-check-input" id="customSwitch1">
          <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
        </div>


      </div>
      <div class="HowItWorks-diagram">
        <img class="img-fluid" src="http://via.placeholder.com/640x360" alt="Radius of Distraction">
        <div id="radius-of-distraction"></div>
      </div>
      <hr class="text-muted">
    </label>
  </div>
</div>

CSS

.HowItWorks-togglerTextLabel {
    color: #00b5d0;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.HowItWorks-togglerCheckbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.HowItWorks-togglerLabel:before {
    background-color: #fff;
    border-radius: 1.125rem;
    bottom: 0;
    content: "";
    display: block;
    height: 1.125rem;
    margin: 0;
    position: absolute;
    right: .1875rem;
    top: .1875rem;
    -webkit-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;
    width: 1.125rem;
}
.HowItWorks-togglerDisplay span {
    cursor: pointer;
    font-size: 80%;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-transition: color .4s ease-in;
    -o-transition: color .4s ease-in;
    transition: color .4s ease-in;
    vertical-align: middle;
}
.HowItWorks-diagram {
    margin-top: .75rem;
    position: relative;
}
.img-fluid, .img-thumbnail,img {
    max-width: 100%;
    height: auto;
}
.custom-switch .form-check-input {
    width: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    margin-left: -2.5em;
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}
.form-check-input {
    background-color: green;
    border-color: green;
}

.HowItWorks-togglerTextLabel {
    color: #00b5d0;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}


.HowItWorks-togglerDisplay span:first-of-type {
    color: #bdbdbd;
}

.radius-of-distraction {
    background-color: rgba(16,112,142,.4);
    border-radius: 50%;
 ...

JavaScript

/* let bubble = document.getElementById("radius-of-distraction");
 */
$("#customSwitch1").on('change', function() {
        if ($(this).is(':checked')) {
            $(this).attr('value', 'true');
        }
        else {
           $(this).attr('value', 'false');
           alert($(this).val());
         document.getElementById("#radius-of-distraction").style.display='none';
        }
    });