JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<div class="info"></div>
<iframe id='test' frameborder=0></iframe>

CSS

iframe{
  width: calc(100% - 260px);
  height: 99%;
  overflow:auto;
  position:absolute;
  top:0px;
  left:250px;
  right:0px;
 
 bottom:0px
}
.info{
  width: 250px;
  height: 99%;
  overflow:auto;
  position:absolute;
  top:0px;
  left:0px;
  right:250px;
}
.info > *  {
  position: absolute;
  width:100%;
  top:0;
  border-top:black 1px solid;
}

JavaScript

var big = `
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

</head>
<body>
		<div style="height:200px;">1</div>
		<div style="height:200px;">2</div>
		<div style="height:200px;">3</div>
		<div style="height:200px;">4</div>
		<div style="height:200px;">5</div>
		<div style="height:200px;">6</div>
		<div style="height:200px;">7</div>
    <div >	
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
    </div>
</body>
</htm>
`

var entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

//test.src = "data:text/html;charset=utf-8," + big;
test.contentWindow.addEventListener( 'scroll', function (e) {
	//console.log(test.contentWindow)
	$('.info').scrollTop = (test.contentWindow.pageYOffset);
})
var $ = (x) => document.querySelector(x);
var $A = (x) => Array.prototype.slice.call(x);

//p.innerHTML = $(test.contentWindow.documentElement.querySelector("*"))
test.contentDocument.documentElement.innerHTML = big;
$A(test.contentDocument.querySelectorAll("body > *")).map( function (e)  {
	var r = e.getBoundingClientRect();
  var p = document.createElement('div');
  p.innerHTML = `${escapeHtml(e.innerHTML)}`;
  p.style.top= r.top +"px";
  p.style.height= (r.bottom - r.top) +"px";
  
	// console.log( e.getBoundingClientRect());
	$('.info').appendChild(p);
});

//contentDocument