JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
      .doctors-check2:checked~#doctorcard {
        display: block !important;
      }

      .facility-check2:checked~#facilitycard {
        display: block !important;
      }

      .checkbox-label {
        font-size: 20px;
      }

      Results {
        font-size: 20px;
        font-weight: 600;
      }

      font-size {
        font-weight: 700;
      }

    </style>
    <div class="container">

      <Results>Results:</Results>
      <div class="container">
        <div class="row justify-content-md-left">
          <div class="row">
            <div class="col-sm">
              <div class="checkbox-holder">
                <label class="checkbox-label">Doctors</label>
                                <input class="doctors-check2" type='checkbox' >
                                <span class="custom-checkbox"></span>
																<label class="checkbox-label">Facility</label>
                                <input class="facility-check2" type= 'checkbox' >
																
																<div class="test" data-ct-component="product-card" style="max-width: 46rem; display:none;" id="doctorcard">
        Doctor card
    </div>
		 <div class="product-card product-card-drop-shadow mb-ml" data-ct-component="product-card" id="facilitycard" style="max-width: 46rem; display:none;">
 Facility card
</div>
              </div>
            </div>
        </div>
    </div>
    <div class="container">
    </div>

</head>
</html>

CSS

.switch-1:checked~.hidden-1 {
  display: none;
}

.switch-2:checked~.hidden-2 {
  display: none;
}

.switch-3:checked~.hidden-3 {
  display: none;
}