JSFiddle - React, Tailwind, and code Playground

by Adi Jaya

HTML

<iframe></iframe>

<div>xxxxxx</div>

CSS

body {
    background: #585858;
    margin: 0;
    padding: 20px;
}
iframe {
    width: 100%;
    border: none;
    height: 300px;
    background: white;
}

div {
    position: absolute;
    background: black;
    padding: 5px;
    text-align: center;
    width: 100px;
    color: white;
}

JavaScript

var template = "<p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p><b>Lorem Ipsum</b></p>";
   
   
   
   $(document).ready(function(){
   $('iframe').contents().find('body').html(template);
   
      var iframe = $('iframe').contents();
      var selector = iframe.find('b');
      var iframeheight = $('iframe').height();

      $.each(selector, function(e){
        $(this).click(function(){
        		var position = $(this).offset().top;
            var validposition = position/iframeheight
          //alert( iframeheight ); 
          //alert( position );
          //alert( validposition );
          
          $( 'div' ).css({
          	"top":position+"px"
          });
          
        })
      })
    })