JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <section role="main">
        <section id="section1">
            <input name="input1" type="text" />
        </section>
    </section>
</div>

<ul style="position: absolute;"></ul>

CSS

html { height: 100%; }
body { height: 100%; margin:0; }
section[role="main"] { padding: 5px; }
#container { min-height: 100%; }
#section1 { text-align: center; }
ul, li {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

JavaScript

function showOffset() {
    var offset = $("#section1 input[name=input1]").offset();
    $( "<li>" ).text( offset.left ).appendTo( "ul" );
    $( "ul" ).offset({
        left: offset.left,
        top: offset.top + 20
    });
}

showOffset();
$( "body" ).click( showOffset );