JSFiddle - React, Tailwind, and code Playground

by zerrax

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 id="App_icon" style="left: 0px; top: 0px;" class="App_icon">
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/2/22/Icon-opera-next-2013.png/revision/latest?cb=20151101010038">
        <a>Opera</a>
        <div id="App_icon" style="left: 200px; top: 0px;" class="App_icon">
          <img src="https://vignette.wikia.nocookie.net/logopedia/images/2/22/Icon-opera-next-2013.png/revision/latest?cb=20151101010038">
          <a>Opera</a>
        </div>
        <div id="App_icon" style="left: 100px; top: 100px;" class="App_icon">
          <img src="https://vignette.wikia.nocookie.net/logopedia/images/2/22/Icon-opera-next-2013.png/revision/latest?cb=20151101010038">
          <a>Opera</a>
        </div>
<div class="window resizable">
  <div class="titlebar resizers">
    <div class="buttons">
      <div class="close">
        <a class="closebutton" href="#"><span><strong></strong></span></a>
        <!-- close button link -->
      </div>
      <div class="minimize">
        <a class="minimizebutton" href="#"><span><strong></strong></span></a>
        <!-- minimize button link -->
      </div>
      <div class="zoom">
        <a class="zoombutton" href="#"><span><strong></strong></span></a>
        <!-- zoom button link -->
      </div>
    </div>
    SublimText
    <!-- window title -->
  </div>
  <div class="content">
   <div id="editor">
d
</div>

</div>

    <div onmouseover="makeResizableDiv(this)" class='resizer top-left'></div>
    <div onmouseover="makeResizableDiv(this)" class='resizer top-right'></div>
    <div onmouseover="makeResizableDiv(this)" class='resizer bottom-left'></div>
    <div onmouseover="makeResizableDiv(this)" class='resizer bottom-right'></div>
  </div>

<div class="window">
  <div class="titlebar">
    <div class="buttons">
      <div...

CSS

.white {
    --windows_border-size: 1px;
    --windows_border-type: solid;
    --windows_border-color: rgba(255, 255, 255, 0.1);
  
    --windows-col-margin: 5px;
  
    --windows-bg-color: rgba(0, 0, 0, 0.2);
    --windows-header-color: rgba(0, 0, 0, 0.2);
  }
  
  body {
    font-size: 32px;
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol,
  ul {
    list-style: none;
  }
  
  blockquote,
  q {
    quotes: none;
  }
  
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  body {
  
    /* The image used */
    background-image:...

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(
...