JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/blocks-v1/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:700" rel="stylesheet">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">

<div class="page-editor-block" data-id="block-root" data-path="[]">

    <div class="page-editor-block app-dragdocksort-item" data-id="block-0" data-path="[0]">
    <div class="anim-bounce wipe-reveal lazyload-child">
      <h1 class="animation-reveal-item d-inline">Self-imposed</h1>
      <div class="animation-box"></div>
      </div>
    </div>

    <div class="page-editor-block app-dragdocksort-item" style="--bs-accent-bg: var(--bs-warning)" data-id="block-1" data-path="[1]">
  <div class="anim-float">
    <div class="wipe-reveal right delay-300 lazyload-child">
      <h1 class="animation-reveal-item d-inline">limitations</h1>
      <div class="animation-box"></div>
      </div>
    </div>
  </div>



  <div class="page-editor-block container section section-dark" style="height: 600px;" data-id="block-2" data-path="[2]">
    hello?
    <div class="page-editor-block" data-id="block-3" style="position: absolute;top:0px;right:0px" data-block-type="image" data-block-id="1" data-depth="6" data-path="[2,0]">

      <figure class="page-editor-child figure parallax-target" data-id="block-3">

         <div class="wipe-reveal delay-300 lazyload-child">
            <img class="page-editor-child animation-reveal-item hdw-size-target" data-id="block-3" data-block-type="image" data-block-id="1" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592860200694_website1_700x693.jpg">
            <div class="animation-box"></div>
        </div>

          <figcaption class="page-editor-child" data-id="block-3">
            absolutely position image
          </figcaption>
       </figure>

    </div>

  </div>



  <div class="page-editor-block...

SCSS

body, html {
  padding: 30px;
  font-family: 'Poppins';
}

h1 {
  font-size: 7em;
}

.handle-rotate {
  top: -30px;
  left: -8px;
  right: -8px;
  &::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 6px;
    content: '';
    width: 1px;
    border-left: 2px dotted pink;
    height: 30px;
  }
}

.wipe-reveal {
  display: inline-block;
}

.neon-knob-dial {
  width:25px;
  height:25px;
  border-radius: 50%;
  background: linear-gradient(#efefef, #ccc);
  box-shadow: 0 2px 2px rgba(255, 255, 255, .4), inset 0 2px 2px rgba(0, 0, 0, .45);
  //border: 1px solid rgba(150,150,150,1);
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    background: gray;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
}

JavaScript

const getWinOffset = function(win={document}) {
    const document = win.document;
    const documentElement = document.documentElement;

    const scrollX = documentElement.scrollLeft || 0, // win.document.body.scrollLeft || 0 || clientLeft
        scrollY = documentElement.scrollTop || 0; //|| win.document.body.scrollTop || 0 || clientTop
    return [scrollX, scrollY];
};

const parseTransform = function(transform) {
  return Array.from(transform.matchAll(/(\w+)\((.+?)\)/gm))
    .reduce((agg, [, fn, val]) => ({
    ...agg,
    [fn]: val
  }), {});
}
const transformStr = function(obj) {
	let str = '';
  for (const key in obj) {
  	str += `${key}(${obj[key]}) `;
  }
  return str;
}

function adjustLine(tT, tL, fT, fL, line) {

	let CA = Math.abs(tT - fT);
	let CO = Math.abs(tL - fL);
	let H = Math.sqrt(CA * CA + CO * CO);
	let ANG = 180 / Math.PI * Math.acos(CA / H);

	let top, left;

	if (tT > fT) {
		top = (tT - fT) / 2 + fT;
	} else {
		top = (fT - tT) / 2 + tT;
	}

	if (tL > fL) {
		left = (tL - fL) / 2 + fL;
	} else {
		left = (fL - tL) / 2 + tL;
	}

	if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) {
		ANG *= -1;
	}

	top -= H / 2;

	line.style.transform = 'rotate(' + ANG + 'deg)';
	line.style.top = top + 'px';
	line.style.left = left + 'px';
	line.style.height = H + 'px';
}

const extractProperties = function(element, ui) {
	
	if (false) {
			//We extract current values from data attribute
			const extracted = JSON.parse(ui.data[ui.property] || null);
			if (extracted) {
				ui.current = extracted;
			}
      
		} else {

      
      if (ui.property !== 'translate' && ui.property !== 'rotate') {
      
        for (let i = 0, l = ui.props.length; i < l; i++) {
        	const computedStyle = window.getComputedStyle(element);
          ui.current[i] = parseInt(computedStyle[ui.props[i]]);
        }
      	
      } else {
        //For agg transform properties: translate, rotate, scale, skew etc.
       ...