JSFiddle - React, Tailwind, and code Playground

by luizpaulo165

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam expedita, eius? Optio minus neque beatae tempore quidem sequi at reprehenderit deserunt possimus dignissimos dolor, provident id autem eligendi fugit consectetur?</p>

CSS

body{
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
}
p{
    margin-bottom:30px;
}

JavaScript

$(function () {
    $(window).scroll(function () {
    	var topPage = $(this).scrollTop();
        
        // exemples
        if (topPage > 50 && topPage < 300) {
            $('body').css({
                'color': '#fff',
            	'background': '#2CC990'
            });
        }
        else if (topPage > 301) {
            $('body').css({
                'color': '#fff',
            	'background': '#FC6042'
            });
        }
        else{
            $('body').css({
                'color': '#000',
            	'background': '#fff'
            });
        }
    });
});