JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<div id="time"></div>
<div id="board"></div>

CSS

.flip-card{
    background: rgba(0,200,120,0.9);
    display: inline-block;
    padding: 29px;
    margin:10px;
    min-width:20px;
    text-align: center;
    background:#000;
}

.flip-card:hover{opacity:0.3;}

.hidden{
    background:#000;
}

#board{width:500px;}

JavaScript

time = 5;
function init(){
    letters = ['A','a','B','b','C','c','D','c','E','e','F','f'];
    for(var i=0;i<25;i++){
        document.getElementById('board').innerHTML += '<div class="flip-card">'+letters[Math.floor(Math.random() * 12) + 0]+'</div>';    
    }   
}

function play(){
    cards = document.getElementsByClassName('flip-card');
    for(var x = 0;x < cards.length;++x){
        cards[x].setAttribute("class", "hidden");
    }
}

function countDown(){
        document.getElementById('time').innerHTML(time);
        time -= 1;
}

init();

resetColour(){
     $('.flip-card').css('background','#fff');
}


$('.flip-card').click(function(){
    $(this).css('background','#399');
}, function() {
    $(this).css('background','#399');
});