JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<header><h1>Card Matching Game</h1></header>
<section id="game">
  <div id="cards">
    <div class="card">
      <div class="face front"></div>
      <div class="face back"></div>div>
    </div>
  </div>
</section>

CSS

body{
	text-align:center;
	background: BROWN url(../images/bg.jpg);
}
#game{
	border-radius: 10px;
	border: 1px solid GRAY;
	background: DARKGREEN url(../images/table.jpg);
	width: 500px;
	height: 460px;
	margin: 0 auto;
	display: flex;
	justify-content: center; 
	align-items: center;
}
.card{
	perspective: 600px;
	width: 80px;
	height: 120px;
	float: left;
	transition: all .3s;
  margin: 10px;
}

.face{
	border-radius: 10px;
	width: 100%;
	height: 100%;
	position: absolute;
	transition-property: opacity, transition, box-shadow;
	transition-duration: .3s;
	backface-visibility: hidden;
}
.front{
	background: GRAY url(../images/deck.png) 0 -480px;
}
.back{
	background: LIGHTGREY url(../images/deck.png);
	transform: rotate3d(0,1,0,-180deg); 
}

.card:havor .face, .card-flipped .face {
	box-shadow: 0 0 10px #aaa;
}
.card-flipped .front{
	transform: rotate3d(0,1,0,180deg);
}
.card-flipped .back{
	transform: rotate3d(0,1,0,0deg);
}
.card-removed{
	opacity: 0;
}

.cardAJ {background-position: -800px 0;} 
.cardAQ {background-position: -880px 0;} 
.cardAK {background-position: -960px 0;} 
.cardBJ {background-position: -800px -120px;} 
.cardBQ {background-position: -880px -120px;} 
.cardBK {background-position: -960px -120px;} 
.cardCJ {background-position: -800px -240px;} 
.cardCQ {background-position: -880px -240px;} 
.cardCK {background-position: -960px -240px;} 
.cardDJ {background-position: -800px -360px;} 
.cardDQ {background-position: -880px -360px;} 
.cardDK {background-position: -960px -360px;}

JavaScript

$(function(){
	//clone 12 copies of the card
	for(var i=0; i<11;i++){
		$("#cards").append($(".card:first-child").clone());
	}
  
  $('.card').on('click', function(event) {
  	var $currentCard = $(this);
    $currentCard.find('.front').css('background', 'blue');
  	// do something with your current clicked card
  });
});