JSFiddle - React, Tailwind, and code Playground

by DemonTut

HTML

<div></div>
<p></p>

SCSS

body {
	background-color: rgb(243, 245, 246);
}

div {
	width: 30%;
	height: 50px;
	padding: 20px;
	background-clip: padding-box;
	border: 1px dotted black;
	border-radius: 15px;
}

JavaScript

let i = 0;

$(() => {
	let timer = setInterval(() => {
		i = (i + 4) % 360;
		let col = (Math.round(Math.random() * 0xFFFFFF)).toString(16);
		let col2 = (Math.round(Math.random() * 0xFFFFFF)).toString(16);
		let col3 = (Math.round(Math.random() * 0xFFFFFF)).toString(16);

		$("div").css("background-image", `linear-gradient(${i}deg, #${col}, #${col2}, #${col3})`);
		$("p").html(`deg : ${i}<br>
			col : #${col}<br>
			col2 : #${col2}<br>
			col3 : #${col3}<br>`);
	}, 50);
	
	$("div").click(() => clearInterval(timer));
});