JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!-- Draggable DIV -->
<div id="mydiv">
  <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
  <div id="mydivheader">>Reproductor jwplayer</div>
            <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
        
<!--add 1-->
<body>



<style type="text/css">
 
  body,html{
height:100%; /*Siempre es necesario cuando trabajamos con alturas*/
	font-family: Arial, Helvetica, sans-serif;
}

 /* The Modal (background) */
.myModal1 {
    color: #FFF;
background: #000;
position:relative; /*El div será ubicado con relación a la pantalla*/
left:0px; /*A la derecha deje un espacio de 0px*/
right:0px; /*A la izquierda deje un espacio de 0px*/
bottom:0px; /*Abajo deje un espacio de 0px*/
height:50px; /*alto del div*/
z-index:0;
}
/* Modal Content/Box */
.modal1-content {
	
    background-color: #fefefe;
    margin: 10px; /* 15% from the top and centered */
    padding: 0;
    border: 1px solid #888;
	border-radius: 15px;
  
  
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
/* The Close Button */
.close1 {
    color: #111;
    float: right;
    font-size: 20px;
    font-weight: bold;
}
.close1:hover, .close1:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
/* Modal Header */
.modal1-header {
    padding: 2px 16px;
    background-color: #f0f0f0;
	font-size: 22px;
	text-align: center;
    color: black;
}
/* Modal Body */
.modal1-body {padding: 2px 16px;}
.button1 {

    
  top: 0;
   
}
.myBtn1 {

color: #FFF;
background: #000;
position:absolute; /*El div será ubicado con relación a la...

CSS

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
  left: 0px; /*A la derecha deje un espacio de 0px*/
right: 0px; /*A la izquierda deje un espacio de 0px*/
bottom: 0px; /*Abajo deje un espacio de 0px*/
height: 50px; /*alto del div*/
z-index: 0;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

JavaScript

// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}