JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="snap" class="snapshot" style="display:none" src="frame.html"  width="500" height="300" scrolling="no" border="0"></iframe>
<a href="http://www.bbc.com/">bbc</a>
<a href="http://www.netflix.com/">netflix</a>

CSS

iframe.snapshot{
position:absolute}







#snap{

    -webkit-transform: scale(0.75, 0.75); 
       -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

JavaScript

var snapshot=document.getElementById("snap");

window.addEventListener("mousemove", moveSnapshot, false);

function moveSnapshot(e) {
snapshot.style.top=e.clientY+2+"px";
snapshot.style.left=e.clientX+2+"px";
}

function showSnapshot() {
snapshot.style.display="block";
snapshot.src=this.href;
}

function hideSnapshot() {
snapshot.style.display="none";
}

var links=Array.prototype.slice.call(document.getElementsByTagName("a"));
for(i in links) {
links[i].addEventListener("mouseover", showSnapshot, false);
links[i].addEventListener("mouseout", hideSnapshot, false);
}