<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<style>
td img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.dropdown .dropdown-menu .dropdown-item {
  font-size: 1rem;
  padding: 0.9rem 1.5rem;
}
/* Optional: Stylish toggle switch */
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
      margin-left: 10px;
    }
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 20px; width: 20px;
      left: 4px; bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }
    input:checked + .slider {
      background-color: #4CAF50;
    }
    input:checked + .slider:before {
      transform: translateX(22px);
    }
</style>
<div class="main-panel">
	<div class="content-wrapper">
			<div class="row purchace-popup">
              <div class="col-12 stretch-card grid-margin">
                <div class="card card-secondary alert-danger">
                  <span class="card-body d-lg-flex align-items-center">
                    <p class="mb-lg-0"><h4>User Access Configuration</h4></p>
                    
                   
                  </span>
                </div>
              </div>
            </div>
			<div class="col-lg-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <table class="table table-bordered">
            <thead class="thead-light">
              <tr>
                <th>Module</th>
                <th>View</th>
                <th>Edit</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dashboard</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Dashboard"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Dashboard"><span class="slider"></span></label></td>
              </tr>
              <tr>
                <td>Users</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
			  <tr>
                <td>User Projects</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
			  <tr>
                <td>Sensors</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
			  <tr>
                <td>Email Settings</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
			  <tr>
                <td>Email Templates	</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
			  <tr>
                <td>Settings</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Users"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Users"><span class="slider"></span></label></td>
              </tr>
              <tr>
                <td>Logs</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Logs"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Logs"><span class="slider"></span></label></td>
              </tr>
              <tr>
                <td>Finance</td>
                <td><label class="switch"><input type="checkbox" name="view[]" value="Finance"><span class="slider"></span></label></td>
                <td><label class="switch"><input type="checkbox" name="edit[]" value="Finance"><span class="slider"></span></label></td>
              </tr>
			  <tr>
				<td colspan="1"><input type="submit" name="submit" value="Save" class="btn btn-primary"></td>
			  </tr>
              <!-- Add more modules as needed -->
            </tbody>
          </table>
                  </div>
                </div>
              </div>
             
		</div>
		
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>