JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<input class="test" type="text" name="text" value="5" />
<button></button>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>
<div class="class"><span></span></div>

CSS

* {
    margin:0px;
    padding:0px;
}
body {
    background:#f3f3f3;
    overflow-x:hidden;
}
.class {
    position: relative;
    width: 100px;
    height:100px;
    border:1px solid #d3d3d3;
    float:left;
    background:white;
    opacity:0;
    display:table;
    left:200px;
    top:-200px;
    text-align:center;
}

span{
    display:table-cell;
    vertical-align:middle;
}

input{
    width:100%;
    float:left;
    height:50px;
}

button{
    width:100%;
    height:50px;
    float:left;
}

JavaScript

$("button").click(function(){
    
    var number = $(".test").val();
    $("body")

    $(".class").each(function (i) {
          
        var min = 0;
        var max = 10;
        // and the formula is:
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        
        $(this).find("span").text(random);
    
        if(random == number){
            $(this).css({"color":"white", "background": "Orange", "border": "1px solid orange"});
        }    
        
        $(this).delay((i + 1) * 200).animate({
            opacity: 1,
            left: 0,
            top: 0,
        }, 500);
    });
});