JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="header">
  <select type="dropdown">
    <option>Pod A</option>
    <option>Pod B</option>
  </select>
  <select type="dropdown">
    <option>Nurse Unit 1</option>
    <option>Nurse Unit 2</option>
    <option>Nurse Unit 3</option>
  </select>


  <div id="checkboxes1">
    <label for="one">
      <input type="checkbox" id="one" checked />All
    </label>
    <label for="two">
      <input type="checkbox" id="two" />Arrived
    </label>
    <label for="three">
      <input type="checkbox" id="three" />Checked In
    </label>
    <label for="four">
      <input type="checkbox" id="four" />Waiting for Lab
    </label>
    <label for="five">
      <input type="checkbox" id="five" />Waiting for Radiology
    </label>
  </div>
</div>


<div id="main" class="container">
  <div class="row">
    <div class="col-2 waiting">
      <h5 class="card-header">Arrived/Scheduled</h5>
      <ul class="list-group">
        <li class="list-group-item">
          <div>
            <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
              JOHN DOE
            </button>
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div id="checkboxes2">
                      <label...

CSS

#header {
  padding: 1rem;
  display:block;
}

#main {
  padding: 1rem;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#checkboxes1 {
  margin-top: 5px;
}

#checkboxes1 > label {
  margin-left: 10px;
}

#checkboxes1 > label > input {
  margin: 0 5px;
}

.list-group {
  margin-top: 1rem;
}

.container {
  max-width: 100%;
}

.waiting {
  border: 1px solid black;
  height: 1000px;
}

.waiting > div {
  padding: 20px;
}

.rooms {
  border: 1px solid black;
  height: 1000px;
}

.rooms > div {
  padding: 20px;
}

.multiselect {
  width: 200px;
  display: inline-grid;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

JavaScript

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

$('input[type=checkbox]').on('click', function() {
  if (this.id == 'two' && this.checked) {
  	$('#one').prop('checked', false);
    $('.haslab').css('background-color', 'yellow');
  } else {
    $('.haslab').css('background-color', 'white');
  }
});