JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<ul>
</ul>

CSS

ul {width:100%}
li{float:left; height:100%; width: 1px;}

JavaScript

$('document').ready(function() {
    var x = 0;
    var width = $('body').width();
    var height = $(window).height();
    var hue = 'rgba(0,0,0,0.0)';
    
    
    while (x < width) {
        $('ul').append('<li id=' + x + '></li>');
        hue = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.75)'; 
        $('#' + x).css('background-color', hue);
        $('#' + x).css('height', height);
        x++
    }
});



$('li').mouseover(function(){
    hue = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.75)'; 
    $(this).css('background-color', hue);
    
    
});