<style>

    .bl-result-toggle{
        display: none;
        
        width: 55px;
        height: 55px;
        border-radius: 50%;
        position:fixed;
        z-index: 99999999;
        
        top: 50px;
        right: 50px;
        
        background: url('https://static.tildacdn.com/tild6131-6164-4138-a235-623337326462/Group_2_5.png') center no-repeat;
        background-size: cover;
        
        cursor: pointer;
        
         /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);*/
    }
      .bl-result {
          position: fixed;
          cursor: move;
          top: 0;
          right: 0;
          width: 295px;
          
          min-height: 350px;
          
          z-index: 99999999;
          
        }
        
        .bl-result__inner {
          position: relative;
            
          padding: 37px 33px;
        
          /*border: 1px solid grey;*/
          border-radius: 15px;
        
          background-color: #DCDCDC;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
          
          font-family: 'TildaSans',Arial,sans-serif;
        }
        
        .bl-result__close{
            width: 15px;
            height: 15px;
            
            position: absolute;
            top: 25px;
            right: 25px;
            
            cursor: pointer;
        }
        
        .bl-result__close:before, .bl-result__close:after{
            content: "";
            display: block;
            
            width: 100%;
            height: 2px;
            background-color: black;
            
            position: absolute;
            top: 50%;
        }
        .bl-result__close:before{
            transform: translateY(-50%) rotate(45deg);
        }
        
       .bl-result__close:after{
            transform: translateY(-50%) rotate(-45deg);
        }
        
        .bl-result__item:not(:last-child) {
          margin-bottom: 25px;
        }
        
        .bl-result__title{
            font-size: 12px;
            font-weight: 400;
            margin-bottom: 10px;
        }
        
        .bl-result__text{
            font-size: 18px;
            font-weight: 400;
        }
        
        .bl-result__class{
            min-height: 70px;
        }
        
        
        .bl-result__descr{
            font-size: 10px;
            font-weight: 400;
            line-height: 10px;
            
            color: rgb(137,137,137);
        }
        
        .bl-result__ig{
            padding-left: 18px;
            position:relative;
            
            font-size: 10px;
            font-weight: 400;
            line-height: 10px;
            
            color: rgb(137,137,137);
        }
        
        .bl-result__ig:first-child:before{
            content: "";
            display:block;
            
            position:absolute;
            top: 0;
            left: 0px;
            
            width: 10px;
            height: 10px;
            background: url('https://static.tildacdn.com/tild3561-3831-4333-a537-323162626135/Group.svg');
        }
        
        .my-hover {
          background-color: aquamarine !important;
        }
</style>
<div class='bl-result-toggle' id='bl-result-toggle'></div>
<div class="bl-result" id="block-result">
    <div class="bl-result__inner">
      <div class='bl-result__close' id='bl-result-close'></div>
      <div class="bl-result__item">
        <h4 class="bl-result__title">Тег элемента</h4>
        <p class="bl-result__text" id="bl-tag">DIV</p>
      </div>
      <div class="bl-result__item">
        <h4 class="bl-result__title">Классы элемента</h4>
        <p class="bl-result__text bl-result__class" id="bl-class">.class</p>
      </div>
      <!--<div class="bl-result__item">-->
      <!--  <h4 class="bl-result__title">Айди элемента</h4>-->
      <!--  <p class="bl-result__text" id="bl-id">#rec</p>-->
      <!--</div>-->
      <div class="bl-result__item">
          <p class="bl-result__descr">
              Для того, чтобы скопировать классы элемента для кода, нажми SHIFT+C на элементе (картинке, тексте и т.д.)
          </p>
      </div>
       <div class="bl-result__item">
           <p class="bl-result__ig">@ <a target='_blank' href='https://www.instagram.com/rakosolapov'>rakosolapov</a></p>
           <p class="bl-result__ig">@ <a target='_blank' href='https://www.instagram.com/narchevskaya_design'>narchevskaya_design</a></p>
       </div>
    </div>
  </div>
  
  
  <script>
  const block = document.getElementById("block-result");
  const toggle = document.getElementById('bl-result-toggle');

  dragElement(block);

  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;
      // 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;
      // 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;
    }
  }

  getElemData = getElemData.bind(block);
  
  toggle.addEventListener('click', ()=>{
      block.style.display = 'block';
      toggle.style.display = 'none';
      document.body.addEventListener('mousemove', getElemData)
  })
  
  document.getElementById('bl-result-close').addEventListener('click', ()=>{
     document.body.removeEventListener('mousemove', getElemData);
     block.style.display = 'none';
     toggle.style.display = 'block';
  })

  document.body.addEventListener('mousemove', getElemData);
  document.addEventListener('keydown',keydownC);
  
  function keydownC(e){
      if(e.key==='C'||e.key==='С'){
          console.log(e.key)
          var $tmp = $("<textarea>");
          $("body").append($tmp);
          $tmp.val($("#bl-class").text()).select();
          document.execCommand("copy");
          $tmp.remove();
      }
    // document.removeEventListener('keydown', keydownC);
  }

  function getElemData(e) {
    this.querySelector('#bl-tag').innerText = '<' + e.target.tagName + '>';

    this.querySelector('#bl-class').innerText = e.target.className;

    // this.querySelector('#bl-id').innerText = "#" + e.target.id;

    e.target.classList.add('my-hover');
    // e.target.addEventListener('mouseout', e => {
    //   e.target.classList.remove('my-hover');
    // })
    
    e.target.addEventListener('mouseout', removeHover);
  }
  
  function removeHover(e){
      e.target.classList.remove('my-hover');
      e.target.removeEventListener('mouseout', removeHover);
  }
</script>