JSFiddle - React, Tailwind, and code Playground

by Rubén Jorge

HTML

<body>
    <p>
        <iframe name="f1">&nbsp;</iframe>
    </p>
     <h1>TRY CHANGING FONT SIZE IN YOUR BROWSER</h1>

    <p>Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc.</p>
    <p>Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum.</p>
    <p id="prefleuron" />
    <p id="fleuron">This is the paragraph to hide.</p>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5em;
    z-index: -1;
    visibility: hidden;
}
h1 {
    font-size: 1.6em;
    text-indent: 0;
    text-align: center;
    margin-bottom: 3em;
}
p {
    text-align: justify;
    text-indent: 1.2em;
    margin: 0;
}
#prefleuron {
    border: 1px solid red;
    height: 1px;
    margin-top: 5em;
}
#fleuron {
    margin-top: 0em;
    text-align: center;
    background: yellow;
}

JavaScript

/* Disable for now */
/* window.addEventListener("load", setup); */
window.frames["f1"].addEventListener("resize", setup);

function setup() {
    var SH = window.innerHeight,
        Element = prefleuron.getBoundingClientRect(),
        TopPos = Element.top / SH,
        BottomPos = Element.bottom / SH;

    TopPos = TopPos - Math.floor(TopPos);
    BottomPos = BottomPos - Math.floor(BottomPos);

/* This alert dialog in only for debugging purpose */    
    alert('Screen Height is ' + SH + ' Top Pos is ' + TopPos + ' and Bottom Pos is ' + BottomPos);

    if (BottomPos >= "0.05" && BottomPos <= "0.725") {
        document.getElementById("fleuron").style.display = "block";
    } else {
        document.getElementById("fleuron").style.display = "none";
    }
}