JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="dialog">
<div class="tit">Tiny baby folder Permissions</div>
<div class="">Search Roles</div>
<div class="">Set all:</div>
<table class="noselect">
  <tbody>
    <tr>
    <th>Role</th>
    <th>Inherited</th>
    <th>Permission</th>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
    <tr>
      <td>Role</td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td>Update</td>
    </tr>
  </tbody>
</table>
  
  
  <div class="footer"><span><input type="checkbox"> Apply to subfolders</span><span class="btn">Save</span></div> 
</div>

CSS

html,body{
  margin:20px;
  padding:0;
  font-family:Segoe UI;
  font-size:12px;
}
.dialog{
  width:500px;
  height:575px;
  border:1px solid #ddd;
  overflow:hidden;
}
.dialog .tit{
  background: #006bba;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-weight: 600;
}
.footer {
    position: fixed;
    top: 580px;
    font-size: 14px;
}
.footer .btn {
    margin-left: 265px;
    background: #ddd;
    padding: 5px 15px;
    border: 1px solid #ccc;
}
.footer span:first-child {
    padding-left: 15px;
}
table {
    border-collapse: collapse;
    width: calc(100% + 3px);
    margin-left: -2px;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}
td, th{
  padding:8px;
  
}
th{
  font-weight:normal;
  font-size:15px;
  text-align:left;
}
table td:nth-child(2){
  text-align:center;
  width:100px;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

JavaScript

function check(box)
  {
    if(mouseDown)
      {
        box.checked = 1-box.checked;
      }
  }
  
  var mouseDown = 0;
  document.body.onmousedown = function()
  {++mouseDown;}
  document.body.onmouseup = function()
  {--mouseDown;}