JSFiddle - React, Tailwind, and code Playground

by jtassi

HTML

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisi leo, rutrum eget viverra ac, dapibus at metus. Proin ornare tortor vel tellus volutpat in scelerisque urna rutrum. In pretium lorem ut sem fermentum dignissim. Suspendisse vitae magna turpis, nec pretium dui. Pellentesque velit tortor, pretium ut mollis sit amet, luctus ac sem. Ut porta pellentesque metus nec consectetur. Vestibulum tempus interdum massa, sed bibendum purus ullamcorper vitae. Morbi tortor tellus, molestie eu sollicitudin ut, fermentum id nisi. Vestibulum pharetra porta nisi dignissim laoreet. Aliquam lobortis cursus sapien, sit amet placerat ipsum auctor eget. Phasellus a nulla id lorem placerat tempus at et turpis. Morbi a tortor ipsum.

Phasellus augue erat, mollis non egestas ut, lacinia tincidunt velit. Nullam consequat placerat tincidunt. Sed a nunc quis dui gravida dictum. Phasellus eget massa nisi, vitae iaculis diam. Morbi tempor, augue et rhoncus consectetur, ligula arcu ultricies odio, a congue velit nunc in justo. Maecenas velit velit, ornare quis pellentesque vitae, pulvinar in urna. Maecenas lacinia ipsum non mi convallis in ornare lectus aliquam. Nam sit amet elementum tellus. Aenean sodales diam lobortis nisi ornare volutpat. Pellentesque viverra ultricies mollis. Ut volutpat quam in lorem consectetur tristique.

Fusce fermentum mi sit amet tellus laoreet aliquet. Sed dapibus tellus vel tellus venenatis aliquet. Donec at metus ut lorem sagittis feugiat vitae a nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mollis tortor lacus, in bibendum elit. Sed sit amet odio laoreet diam congue posuere. Sed non enim sit amet ante adipiscing aliquet. Integer hendrerit tincidunt libero lacinia condimentum. Morbi sed erat risus. Proin tincidunt imperdiet fermentum. Nulla felis leo, egestas vel posuere vel, scelerisque vel urna. Donec tincidunt orci at libero cursus tincidunt. In hac habitasse platea dictumst. In sit...

CSS

div
{
    background:#bcbcbc;
    width:350px;
    height:100px;
    overflow-x:scroll;
}

JavaScript

$(document).ready(function(){
 
    $('body').on('scroll','div',function(){
        
         $(this).css('background',randomizerBG());            
    });
    
});

var arr = ["red","yellow","orange","green","blue","indigo","violet"];

function randomizerBG()
{
    var i = Math.floor(Math.random()*arr.length);
    return arr[i];
}