JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js"></script>
<div class="header"> 
  <div class="left">
    <label>
      <a onclick="uncheck(this)"><span></span>
      <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAMAAAD6fQULAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJZQTFRFAAAAxNHZWWZumaauQU5WLjtDxtPbnquzLDlBg5CYs8DIq7jA1ODpeoaPSldfVGFpeYaOm6iwV2RsOkdPUV5mpLG5UFxlLDhBvsvTnqqzhZKaZnJ7NEFJSFRdVmJrNkJLcHyFlaGqpLC5MDxFlKCpPEhRfIiRk5+o0NzlW2dwoq63foqTYGx1kZ2mu8fQrrrDY294qra/XRaInwAAADJ0Uk5TAP//////////////Mv///////////////////////////////////5n///////////87YqbTAAAAcklEQVR4nE3OWRKCQAwE0AbZVRRZoiK4gAsMoN7/ck6NDKG/8irpqgD/GOYCHMt2GK7nz1bBchxW63CzjfxdnKRSGXk6exyINI9ATjT6pA51Cqly0lnqMomuwI1V1cCd+QCeXHzJZqPVqt9E1w9v8fkCP6SuDGIpvZKiAAAAAElFTkSuQmCC" style="">
      </a>
      <input type="radio" name="oneordie">
      <ul>
        <li><a href="#">About this mac</a></li>
        <li class="slice"></li>
        <li><a href="#">Preference Systeme</a></li>
        <li class="slice"></li>
        <li><a href="#">Service</a></li>
        <li class="slice"></li>
        <li><a href="#">Lock</a></li>
        <li class="slice"></li>
        <li><a href="#">Logout</a></li>
      </ul>
    </label>
     <label>
      <a onclick="uncheck(this)"><span>Finder</span>
      
      </a>
      <input type="radio" name="oneordie">
      <ul>
        <li><a href="#">New Form</a></li>
        <li class="slice"></li>
        <li><a href="#">Close Form</a></li>
        <li class="slice"></li>
        <li><a href="#">Options</a></li>
      </ul>
    </label>
    <label>
      <a onclick="uncheck(this)"><span>Help</span>
      
      </a>
      <input type="radio" name="oneordie">
      <ul>
        <li><a href="#">About</a></li>
        <li class="slice"></li>
        <li><a href="#">Terminal</a></li>
        <li class="slice"></li>
        <li><a...

CSS

:root {
  --icon: 3rem;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}
.Dock {
  position:relative;
  background-color: rgba(235,235,235,0.7);
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, var(--icon));
  grid-gap: 1rem;
  
}
.Icon {
  height: var(--icon);
  width: var(--icon);
  display: grid;
  align-content: center;
  grid-template-columns: 1;
  grid-template-rows: 1;
  cursor:pointer;
}
.Icon:hover{
transform: scale(1.5);
}
.Icon img {
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 100%;
  object-fit: cover;
}






body {
  background: #ecf0f1;
  color: #000;
  font-family: HelveticaNeue, 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
   background: url(https://i.imgur.com/icu9yIJ.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:0;
  margin:0;
}

/* window BEGIN */
.header{
  background:#E2EDF6;
  height:28px;
  border-bottom: 1px solid #000;
  display: flex;
  }
.header > div{
  height:100%;
  margin: 0 0;
  position: relative;
  }
.header > div.left{
  width: 70%;
}
.header > div.right{
  width: 35%;
  text-align: right;
}
.header > div > label{
  position:relative;
  height:100%;
  display: inline-block;   
  margin: 0 4px;   
}
.header > div.right > label{  
  margin: 0 5px; 
}
.header > div > label > a {
  vertical-align: middle;
  line-height:26px;
  }
.header > div > label > a > img {
  position: relative;
  vertical-align: middle;
  padding: 0 5px;
}
.header > div > label > a > span {
  position: relative;
  font-size: 16px;
  color: #333;   
  vertical-align: middle;
}
.header > div > label > div,
.header > div > label > ul{
  margin:0;
  padding:0;
  display: none;
 ...

JavaScript

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;
var isWidth = false;
var di;
var div;
document.addEventListener('mousedown', function(e) {
   var elements = document.getElementsByClassName("window");
    for(var i = 0 ; i < elements.length; i++){
    	elements[i].style.zIndex = "0";
    }
 
    e.target.parentElement.style.zIndex = "1"; 
    e = e || window.event;
    var target = e.target || e.srcElement;
    let str = target.className;
let position = str.indexOf('titlebar');
console.log(position);
    if(position == 0)
    {
        di = target;
       	div = target.parentElement;
          isDown = true;
          isWidth = getWidth(); 
          offset = [
              div.offsetLeft - e.clientX,
              div.offsetTop - e.clientY
          ];
    }
    
}, false);
document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {
            x : event.clientX,
            y : event.clientY
        };
        if(mousePosition.y <= 0){
        	div.style.width = "100%";
        	div.style.height = "calc(100% - 5.2rem)";
          div.style.left = '0px';
        	div.style.top  = '0px';
          isDown = false;
          return;
        }
        if(mousePosition.x <= 0){
        	div.style.width = "50%";
        	div.style.height = "calc(100% - 5.2rem)";
          div.style.left = '0px';
        	div.style.top  = '0px';
          isDown = false;
          return;
        }
        if(mousePosition.x >= isWidth){
        	div.style.left = "50%";
        	div.style.height = "calc(100% - 5.2rem)";
          div.style.right = '0px';
        	div.style.top  = '0px';
          isDown = false;
          return;
        }
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true)
function getWidth() {
  return Math.max(
...