JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Desk+ - Grupo 36</title>
    <link rel="stylesheet" type="text/css" href="PF1.1.novo.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="PF1.1.jquery.js"></script>
  </head>

  <body>

    <button onclick="location.href = 'PF1.html';" id="BtnLogout" class="botao botaoSht"><img class="botaoImg botaoShtImg" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>

    <div id="BlueWindow" style="display:none;">
      <div id="BlueWindowheader">
        <header class="windowTop1">
          <img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()">
          <h1 id="JoanaPTexto">Joana's Phone</h1>
        </header>
      </div>
      <div id="bottomBlue">
        <div id="doc1">
          <div id="doc1header">
            <img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
          </div>
          <h1 id="JoanaDoc">Example-Joana</h1>
        </div>
      </div>
    </div>

    <div id="DOCS">
      <img id="documentos_logo" src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="X" onclick="openDocs()">
    </div>

    <div id="janela">
    </div>

    <div id="docwindow">
      <div id="docwindowheader">
        <header class="windowTop">
          <h1 id="docsHeadTexto">Documents</h1>
          <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
        </header>
      </div>

      <div id="bottomWindowDocs">
        <div class="documents">
          <div id="DOCUMENTO" class="draggable...

CSS

html,
body {
  background: url("http://wallpaperask.com/wp-content/uploads/Amazing-1920x1080-HD-wallpaper.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  font-family: arial, sans-serif;
}

/***************************************************** BOTTOM BAR *********************************************************/

.navbar {
  background-color: none;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10%;
  padding-right: 10%;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  text-align: center;
  overflow: hidden;
  bottom: 0;
  z-index: 1;
}

.botNav {
  width: 5%;
  height: 5%;
  padding: 10px;
  z-index: 2;
}

.botNavImg {
  width: 5%;
  height: 5%;
  z-index: 2
}

/**************************************************** SHUTDOWN BUTTON ********************************************************/

.botaoSht {
  width: 5%;
  height: 5%;
  z-index: 2;
  padding: 0px;
  border-radius: 100%;
  border: 5px solid black;
}

.botaoShtImg {
  width: 100%;
  height: 100%;
  left: 0px;
  padding: 0px;
  z-index: 2;
  border: none;
}

#BtnLogout {
  background-color: Transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  left: -10px;
}

/*******************************BLUE WINDOW*******************************************/

#BlueWindow {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 400px;
  top: 200px;
  border-radius: 10px black solid;
  z-index: 5;
}

#BlueWindowheader {
  z-index: 10;
  height: 30px;
  background: rgb(30, 87, 153);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1)...

JavaScript

$(function() {


  startTime();

  $('#docwindow').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    cursor: 'move',
    greedy: true,
    drop: function(event, ui) {
      if (ui.draggable.hasClass('out-of-box')) {
        ui.draggable.remove();
        console.log("Removing element");
      } 

    }
  });

  $('body').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    cursor: 'move',
    drop: function(event, ui) {
      if (ui.draggable.hasClass("in-box")) {
        var clone = ui.draggable.clone();
        clone.removeClass("in-box").addClass("out-of-box");
        clone.detach().appendTo($("body")).draggable({});
        ui.draggable.draggable({
          revert: true
        });
      }
    }
  });

  $("#docwindow, .draggable").draggable({});
});

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

//////////////////////////////////////////////////////////////////////////RELOGIO DATA//////////////////////////////////////////
function startTime() {
  var today = new Date();
  var hr = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
  hr = (hr == 0) ? 12 : hr;
  hr = (hr > 12) ? hr - 12 : hr;
  //Add a zero in front of numbers<10
  hr = checkTime(hr);
  min = checkTime(min);
  sec = checkTime(sec);
 ...