JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<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>
<div id="click-indicator"></div>

CSS

body{
    padding: 10px;
    font: 300 14px/18px Arial, sans-serif;
}

.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;
}

.menu{
    padding: 10px;
    background-color: rgba(255,255,255,.6);
}

    .menu li a,
    .menu li a:visited{
        color: #000;
    }

    .menu li a:hover{
        color: #777;
    }

JavaScript

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