JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="overlay">
        <span class="loader">
            loading...
          </span>
    </div>
    <div class="content">
        Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element "away" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at it's original size.   
        
        Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element "away" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at it's original size.
    <div>
</div>

CSS

.container
{
    margin: 25%;
    position:relative;
    width:200px;
    height:200px;
    border:3px solid #ddd;
    overflow:auto;
}

.overlay {
    width:100%;
    height:100%;
    margin:auto;
    left:0;
    top:0;
    position:absolute;
    background:#fff;
    opacity:.8;
    text-align:center;
    
}

.loader {
display:inline-block;
}
}