JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div class="document">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

CSS

.document {
    height: 200px;
    width: 500px;
    overflow: hidden;
    position:relative;
}
.container {
    background-color: transparent;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    top: -260px;
}
.item {
    background-color: #60aad3;
    height: 1em;
    padding-bottom: 1px;
    width: 100%;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.item:hover {}

JavaScript

var ColorTimer = null;
var CurrentColor = {}; //new Array();
    CurrentColor.h = 356;
	CurrentColor.s = 100;
    CurrentColor.v = 37;
var CountDown = true; //Math.floor (Math.random() + 0.5);
var baseColor = {};
    baseColor.h = 201;
    baseColor.s = 55;
    baseColor.v = 83;

function hsv2hsl(hue,sat,val){
    return[ //[hue, saturation, lightness]
            //Range should be between 0 - 1
        hue, //Hue stays the same
 
        //Saturation is very different between the two color spaces
        //If (2-sat)*val < 1 set it to sat*val/((2-sat)*val)
        //Otherwise sat*val/(2-(2-sat)*val)
        //Conditional is not operating with hue, it is reassigned!
        sat*val/((hue=(2-sat)*val)<1?hue:2-hue), 
		
        hue/2 //Lightness is (2-sat)*val/2
        //See reassignment of hue above
    ]
}
 
hsl2hsv=function(hue,sat,light){
    sat*=light<.5?light:1-light;
 
    return[ //[hue, saturation, value]
    //Range should be between 0 - 1
		
        hue, //Hue stays the same
        2*sat/(light+sat), //Saturation
        light+sat //Value
    ]
}

function hsv2rgb (h, s, v) {
	h /= 360; s /= 100; v /= 100;
	var m2 = v <= 0.5 ? v * (s + 1) : v + s - v * s;
	var m1 = v * 2 - m2;
    var r = norm2hex(hue2rgb (m1, m2, h + 1/3));
    var g = norm2hex(hue2rgb (m1, m2, h));
    var b = norm2hex(hue2rgb (m1, m2, h - 1/3));
    return r + '' + g + '' + b;
}
function hue2rgb(m1, m2, h) {
	if (h < 0) h = h + 1;
	if (h > 1) h = h - 1;
	if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
	if (h * 2 < 1) return m2;
	if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
	return m1;
}
function norm2hex(value) {
	return dec2hex(Math.floor(255 * value));
}
function dec2hex(dec) {
	var hexChars = "0123456789ABCDEF";
	var a = dec % 16;
	var b = (dec - a) / 16;
	hex = '' + hexChars.charAt (b) + hexChars.charAt (a);
	return hex;
}
function AlterColor() {	
	CurrentColor.h = Math.floor(360 * Math.random());
	CurrentColor.s = 30 + Math.floor(70 * Math.random());
	CurrentColor.v =...