JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
</div>

<pre class="logs">
    
</pre>

CSS

.container {
    margin-top: 20px;
}
.container div {
    width: 200px;
    height: 100px;
    background: blue;
    cursor: pointer;
    padding: 10px;
    display: inline;
    font-family: Arial;
    color: white;
    font-weight: bold;
}

.container div:hover {
    background: red;
}

.logs {
    background: black;
    color: lightgreen;
    padding: 10px;
    height: 200px;
    font-weight: bold;
    overflow-y: auto;
}

JavaScript

var functions = [
    "$(this).css('background')",
    "$(this).css('height')",
    "$(this).css('width')",
    "$(this).text()",
    "$(this).css('color')",
    "$(this).css('font-family')",
    "$(this).css('display')",
    "$(this).css('cursor')",
    "$(this).css('font-weight')",
    "$(this).next().css('background')",
    "$(this).prev().css('background')"
];

$(document).on('customEventName', function(e) {
    
    var functionNames = [ 
        "$(e.target).css('background')",
        "$(e.target).css('height')",
        "$(e.target).css('width')",
        "$(e.target).text()",
        "$(e.target).css('color')",
        "$(e.target).css('font-family')",
        "$(e.target).css('display')",
        "$(e.target).css('cursor')",
        "$(e.target).css('font-weight')",
        "$(e.target).next().css('background')",
        "$(e.target).prev().css('background')"
    ];
    var functions = [ 
        $(e.target).css('background'),
        $(e.target).css('height'),
        $(e.target).css('width'),
        $(e.target).text(),
        $(e.target).css('color'),
        $(e.target).css('font-family'),
        $(e.target).css('display'),
        $(e.target).css('cursor'),
        $(e.target).css('font-weight'),
        $(e.target).next().css('background'),
        $(e.target).prev().css('background')
    ];


    var f = Math.floor(Math.random() * 11);
    
    console.log(functionNames[f] + " => " + functions[f]);
});

$(document).on('click', '.container div', function(e) {
    var customEvent = $.Event("customEventName", { target: this }) 
    $(document).trigger(customEvent);
});

console.log = function (message) {
    $(".logs").prepend(message + "\n");
}