JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div style="height:100px; border:solid 1px black; overflow-y:scroll;">
            Please scroll down...
            <br/>
            <div style="height:400px;">
            </div>
            <br/>
            <div id="MrBlue" style="height:20px; background-color:blue; color:white">
                Mr. Blue
            </div>
        </div>
        
    </body>
</html>

CSS

body {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    font-size:12px;
    line-height:15px;  
}

JavaScript

$(document).ready(function() {


    alert($("#MrBlue").position().top);



});