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-check:checked~#doctorcard {
        display: none;
      }

      .facility-check:checked~#facilitycard {
        display: none;
      }

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

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

      font-size {
        font-weight: 700;
      }

    </style>
    <div class="container">
      <!-- 		<input class="switch-1" type="checkbox">
		<input class="switch-2" type="checkbox">
		<input class="switch-3" type="checkbox">
		<div class="hidden-1 hidden-2">Info 1</div>
		<div class="hidden-2 hidden-3">Info 2</div>
		<div class="hidden-1 hidden-3">Info 3</div>
		<div class="hidden-1">Info 4</div>
		<div class="hidden-3">Info 5</div>
		 -->

      <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
                                <input class="doctors-check2" type='checkbox' >
                                <span class="custom-checkbox"></span>
                            </label>
              </div>
            </div>
            <div class="col-sm">
              <div class="checkbox-holder">
                <label class="checkbox-label">Facility
                                <input class="facility-check2" type= 'checkbox' >
                                <span class="custom-checkbox"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
    </div>
    <% data.forEach(function(items, index) { %>
    <% index++ %>

<br/>
	 <input class="doctors-check" type='checkbox' >
                                <span...

CSS

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

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

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