JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="draggabledivs.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Draggable Divs Sandbox</title>
  </head>
  <body>
    <div id="frame">
      <button id="toggle1" onclick="toggleOne()">toggle</button>
      <button id="toggle2" onclick="toggleTwo()">toggle</button>
      <button id="toggle3" onclick="toggleThree()">toggle</button>
      <aside
        draggable="true"
        id="window1"
        onclick="bringForward(this)"
        style="display: none"
      >
        I'm on the move!
      </aside>
      <aside
        draggable="true"
        id="window2"
        onclick="bringForward(this)"
        style="display: none"
      >
        Here we go!
      </aside>
      <aside
        draggable="true"
        id="window3"
        onclick="bringForward(this)"
        style="display: none"
      >
        All together now!
      </aside>
    </div>
    <script src="draggabledivs.js"></script>
  </body>
</html>

CSS

#frame {
  width: 99%;
  height: 600px;
  border-width: 3px;
  border-color: black;
  border-style: solid;
  border-radius: 1%;
  background-color: beige;
}

.active {
  position: absolute;
  background-color: #cf5c3f;
  transform: translateZ(10);
}

#window1 {
  display: none;
  left: 4em;
  top: 4em;
  width: 300px;
  height: 200px;
  text-align: center;
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 1%;
  color: black;
  font-size: 2em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#window2 {
  display: none;
  left: 6em;
  top: 6em;
  width: 300px;
  height: 200px;
  text-align: center;
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 1%;
  color: black;
  font-size: 2em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#window3 {
  display: none;
  left: 8em;
  top: 8em;
  width: 300px;
  height: 200px;
  text-align: center;
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 1%;
  color: black;
  font-size: 2em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#toggle1, #toggle2, #toggle3 {
  float: right;
  margin-top: 20px;
  margin-right: 30px;
  width: 100px;
  height: 70px;
}


aside {
  position: fixed;
}

JavaScript

const buttonOne = document.querySelector("#toggle1");
const buttonTwo = document.querySelector("#toggle2");
const buttonThree = document.querySelector("#toggle3");
const windowOne = document.querySelector("#window1");
const windowTwo = document.querySelector("#window2");
const windowThree = document.querySelector("#window3");

function toggleOne() {
    if (windowOne.style.display === "none") {windowOne.style.display = "block"; } else {  
        windowOne.style.display = "none";}
}

function toggleTwo() {
    if (windowTwo.style.display === "none") {windowTwo.style.display = "block";} else {  
        windowTwo.style.display = "none";}
}

function toggleThree() {
    if (windowThree.style.display === "none") {windowThree.style.display = "block"; } else {  
        windowThree.style.display = "none";}
}



function bringForward(elem) {
    var windows = document.querySelectorAll("aside");
    for (i = 0; i < windows.length; i++) {
        windows[i].classList.remove('active');
        windows[i].style.draggable === "false"
        windows[i].style.position === "fixed";
    }
elem.classList.add('active');
elem.style.draggable === "true";
elem.style.position === "absolute";
}


windowOne.addEventListener('click', function() {
 
if (windowOne.classList.contains('active')) {
function dragStart (e) {
    var style = window.getComputedStyle(e.target, null);
    e.dataTransfer.setData("text/plain", 
        (parseInt(style.getPropertyValue("left"), 10) - e.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - e.clientY));

}

function dragOver (e) {
    e.preventDefault();
    return false;
}

function dropDown (e) {
    var offset = e.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('window1');
    dm.style.left = (e.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (e.clientY + parseInt(offset[1],10)) + 'px';
    e.preventDefault();
    return false;
}

var dm =...