JSFiddle - React, Tailwind, and code Playground

by CollonilTolli

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Доска | Проект 4</title>
</head>
<body>
<div class="container" id="board">
</div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 400px;
}
.square{
  width: 16px;
  height: 16px;
  background-color: #1d1d1d;
  margin: 2px;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
}
.square:hover{
  transition-duration: 0s;
}

JavaScript

const board = document.querySelector('#board')
const SQUARES_NUMBER = 440;
const colors = ['#ff3501', '#9eceff', '#afffa6', '#ff009d', '#6dff00', '#fe00ac', '#7d1ff', '#ffb202']

for (let i = 0; i < SQUARES_NUMBER; i++) {
  const square = document.createElement('div')
  square.classList.add('square')

  square.addEventListener('mouseover', () => setColor(square))
  square.addEventListener('mouseleave', () => removeColor(square))

  board.append(square)
}

function setColor(element) {
  const color = getRandomColor()
  element.style.backgroundColor = color
  element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element) {
  element.style.backgroundColor = '#1d1d1d'
  element.style.boxShadow = `0 0 2px #000`
}

function getRandomColor() {
  const index = Math.floor(Math.random() * colors.length)
  return colors[index]
}