JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div id="layer">
    <div class="content">
    <input type="text" value="Click Me!" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
<div id="overlink" style="display: none;">Tied to input.</div>

CSS

* { box-sizing: border-box; }
#layer { position: absolute; width: 50%; top: 50px; left: 25%; height: 200px; overflow: auto; border: 1px solid blue; padding: 1em; z-index: 10; }
.content { position: relative; }

#overlink { position: absolute; z-index: 20; border: 1px solid gray; background: #ccc; width: 75px; }

JavaScript

// Working, scrolling offset layer.
$(document).ready(function(){
    var $ol = $('#overlink');
    
    $('input').on('click',function(){
        var $t = $(this);
        
        if ( $ol.is(":visible") ) {
            $ol.hide().appendTo($('body'));
        } else {
            var iOffset = $t.offset(),
                iHeight = $t.outerHeight(),
                pOffset = $t.parent().offset();
            
            $ol.css({ 
                top: iOffset.top - pOffset.top + iHeight, 
                left: iOffset.left - pOffset.left
            }).appendTo($t.parent()).show();
        }
    });
});