• HTML
• CSS
• JS

HTML

<div class="wrapper">
    <header>Draggable Div</header>
    <div class="content">
        <div class="icon"><i class="icon-move-3"></i></div>
        <div class="title">Draggable Div</div>
        <p>This is a draggable div which is created using HTML CSS & Javascript.You can move this div anywhere on the document or page.</p>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}
body{
    background:#6f36ff;
}
.wrapper{
    top:50%;
    left:50%;
    width:450px;
    background:#fff;
    position:absolute;
    border-radius:10px;
    transform:translate(-50%,-50%) scale(1);
}
.wrapper header{
    color:#6f36ff;
    font-size:23px;
    font-weight:500;
    padding:17px 30px;
    border-bottom:1px solid #bfbfbf;
}
.wrapper header.active{
    cursor:move;
    user-select:none;
}
.wrapper .content{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    margin:30px 30px 40px;
}
.content .icon{
    height:95px;
    width:95px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:5px solid #6f36ff;
}
.content .icon i{
    color:#6f36ff;
    font-size:60px;
}
.content .title{
    font-size:29px;
    font-weight:500;
    margin:15px 0;
}
.content p{
    font-size:16px;
    text-align:center;
}

JS

const wrapper  = document.querySelector(".wrapper"),
        header = wrapper.querySelector("header");

function onDrag({movementX,movementY}){
    
    let getStyle = window.getComputedStyle(wrapper);
    let left     = parseInt(getStyle.left); //getting left value of wrapper and parsing string to integer or number
    let top      = parseInt(getStyle.top);  //getting top value of wrapper and parsing string to integer or number      
    
    wrapper.style.left = `${left + movementX}px`;
    wrapper.style.top = `${top + movementY}px`;

}

header.addEventListener("mousedown",() =>{
    header.classList.add("active");
    header.addEventListener("mousemove",onDrag);
});

document.addEventListener("mouseup",()=>{
    header.classList.remove("active");
    header.removeEventListener("mousemove",onDrag);
});


/* 
    Todo los créditos para su autor
    - Se cambió los iconos por fontello,
    - la escala de 1.4 a 1
    -  y por lo demás todo igual.
    Fuente: https://www.youtube.com/watch?v=8zcfIu3tyw4
*/