JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="action-indicator" id="indicator">
    <ul class="menu">
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
    </ul>
</div>$(function(){
    function randomFrom(array) {
        return array[Math.floor(Math.random() * array.length)];
    }
    var $indicatorColors = [
            "#0F0", "#F00", "#00F", "#0FF", "#FF0"
        ];
    $('#indicator').live("click",function(e){
    
            var $newColor = randomFrom($indicatorColors);
            $(this).css("backgroundColor", $newColor);
        
    });
});

CSS

.action-indicator{
    margin-bottom: 20px;
    background-color: #F00;
    width: 200px;
    height: 200px;
    padding: 40px;
    position: relative;
    -webkit-transition: .3s background-color;
    -moz-transition: .3s background-color;
    -ms-transition: .3s background-color;
    -o-transition: .3s background-color;
    transition: .3s background-color;
}

JavaScript

$(function(){
    function randomFrom(array) {
        return array[Math.floor(Math.random() * array.length)];
    }
    var $indicatorColors = [
            "#0F0", "#F00", "#00F", "#0FF", "#FF0"
        ];
    $('#indicator').click(function(e){
        if(!($(e.target).is('.menu a'))){
            var $newColor = randomFrom($indicatorColors);
            $(this).css("backgroundColor", $newColor);
        }
    });
});