JSFiddle - React, Tailwind, and code Playground

by lukgutowski

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container"></div>

CSS

body {
    padding: 5px;
    width: 100vw;
    height: 100vh;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.button {
    display: flex;
    justify-content: center;
    width: 50px;
    padding: 15px;
    background: #0099ff;
    border: 2px solid #fff;
    border-radius: 5px;
    color: white;
}

.close {
    cursor: pointer;
    font-size: 12px;
}

.close:hover {
    animation: fa-spin 0.1s;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

JavaScript 1.7

for (let i = 0; i < 100; i++) {
    $('<div class="button">')
        .attr('id', `button-${[i]}`)
        .append(`<i class="close material-icons">clear</i>
`)
        .appendTo('.container');
};

$('.close').on("click", function() {
    $(this).parents('.button').fadeOut();
});

$('.container div:nth-child(3n)').css({
        "cursor": "pointer"
    })
    .css({
        "background-color": "#999"
    });


$('.container').on("click", ":nth-child(2n+1)", function() {
    const colors = ["red", "green", "blue", "pink", "orange"];
    const random = colors[Math.floor(Math.random() * colors.length)];

    $(this).css({
        "background-color": random
    })
});

abc()

var abc = function() {

x = 2
var y = 3

}