JSFiddle - React, Tailwind, and code Playground

by ajayogal

HTML

<div id="content" title='click me'>
        <h1>hover me to change colors</h1>
    </div>

CSS

#content{margin: auto; border: 1px solid #eee; clear: both; width: 300px; height: 300px; text-align:center;}
.button1{cursor:pointer;}
#options{position: fixed; top: 0; right: 0;}
img{position:relative; }

JavaScript

$('#content').on('click',function(e){
	$('#content').css({ 
	        'background': 'rgb('+ (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +')'
	    }, 500);
});
$('#content h1').hover(
	function(){
		mointerval = setInterval(changecolor,500);
	},
	function(){
		clearInterval(mointerval);
	}
);


function changecolor()
{
	$('#content').css({ 
	        'color': 'rgb('+ (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +','+ 
	                         (Math.floor(Math.random() * 256)) +')'
	    }, 500);
}