JSFiddle - React, Tailwind, and code Playground

by capricorn

HTML

<ul id="gallery">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<section><button id="random">Мне повезет!</button><button id="null">Сброс</button></section>

CSS

ul {
margin:0 0 20px;;
padding:0;
width: 480px;
text-align: center;
list-style: none;
overflow: hidden;
}
ul li {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding:0;
    float: left;
    background: #111;
    }
.on {background:#f0f}
section {margin: 0; white-space: nowrap}
section button {border: none; width: 220px; color: #fff; margin:0 10px; display: inline-block; padding: 5px 10px; cursor: pointer}
#random {background: #f0f}
#null {background: #000}
#random:active, #null:active {background: #f60}

JavaScript

var random = Math.floor(Math.random() * 1000);

var $li = $("#gallery li");
$li.eq(random % $li.length).addClass("on");