JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div class="overlay"><div class="clone"></div></div>
    <div class="content">
        <p><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" style="float:left;margin-right:1em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis ornare mauris vel, accumsan dapibus ipsum. Maecenas ac lobortis dolor, vitae facilisis tortor. Nam mollis, turpis ac mollis faucibus, dolor erat rutrum ipsum, ac eleifend est ipsum eget nibh. Aliquam venenatis a odio id hendrerit. Integer viverra, metus vel semper commodo, neque metus posuere turpis, non viverra sem sapien eget turpis. Cras sed rutrum ante. Praesent et augue eget ligula gravida ultrices.</p>
    
        <p>Mauris nec quam et orci faucibus laoreet a faucibus magna. Donec hendrerit aliquet libero, sed tincidunt arcu vehicula quis. Nam faucibus mauris non pretium fringilla. Aliquam convallis, urna eu malesuada imperdiet, odio diam varius diam, et iaculis eros odio sit amet quam. Nam at laoreet diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur nec ipsum nisi. Ut id lacus dolor. Maecenas nec sapien dignissim, condimentum eros sit amet, vehicula nulla. Ut dolor sem, dictum vel venenatis et, vestibulum et velit. Etiam a metus lacus. Etiam volutpat nibh ac risus gravida, in vestibulum augue vehicula. Aliquam erat volutpat. Donec sit amet sagittis ligula, non feugiat lacus. Pellentesque eget gravida neque.</p>
    
        <p>Nunc egestas ullamcorper porttitor. Vestibulum tempor nisl id erat ultrices interdum. Quisque gravida mauris eget iaculis venenatis. Pellentesque aliquam mi suscipit leo adipiscing faucibus. Vivamus ultricies turpis adipiscing erat gravida, a pretium massa pharetra. Integer at augue vulputate, scelerisque nisl sed, hendrerit nisl. Vestibulum ante...

CSS

.overlay {
    height: 300px;
    position:absolute;
    top:0;
    right:0;
    left:0;
    overflow:hidden;
    z-index:2;
}
.clone {
    height: 300px;
    padding:3em 1em 1em;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    overflow:hidden;
    -webkit-filter: blur(.25em);
    background:#fff;
    clip:rect(0px,200px,200px,0px) 
}
.content {
    padding:3em 1em 1em;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:auto;
    z-index:1;
}

JavaScript

$(document).ready(function(){
    $('.overlay .clone').append( $('.content').html() );
    $('.content').on('scroll', function(){
        $('.overlay .clone').scrollTop($(this).scrollTop());
    });
});