JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<div id="app">
  <div class="info">
    <div><span class="label">Tijd:</span><span class="value">{{ time }} </span></div>
    <div><span class="label">Beurten:</span><span class="value">{{ turns }} </span></div>
  </div>
  <div class="cards">
    <div class="card" v-for="card in cards" :class="{ flipped: card.flipped, found: card.found }" @click="flipCard(card)">
      <div class="back"></div>
      <div class="front" :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
    </div>
  </div>
  <div class="splash" v-if="showSplash">
    <div class="overlay"></div>
    <div class="content">
      <div class="title">Gewonnen!</div>
      <div class="score">Je score: {{ score }}</div>
      <div class="explain">Maak een print screen waar je tijd, beurten, score en gebruikersnaam goed zichtbaar zijn en stuur hem op.<br><br>Let op! Je mag maar 1 keer inzenden.</div>
      <button class="newGame" @click="resetGame()">Nieuw spel</button>
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Work+Sans:400,300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #92af38;
  font-size: 16px;
  font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #fff;
}

#app {
  margin-right: -10;
  background-color: #fff;
  width:500px;
}

.info {
  text-align: center;
  padding-bottom: 1em;
  border-bottom: 1px solid #92af38;
  background-color: #fff;
  margin-left: -10px;
  width: 490px;
}
.info > div {
  display: inline-block;
  width: 200px;
}
.info > div .label {
  margin-right: 5px;
}
.info > div .value {
  font-weight: bold;
}

.cards .card {
  position: relative;
  display: inline-block;
  width: 115px;
  height: 115px;
  margin: 5px;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.cards .card .front, .cards .card .back {
  border-radius: 2px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: White;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
 ...

JavaScript

var CardTypes = [{ name: "Couture", image: "https://s31.postimg.cc/4k28wgnd7/Couture.png" }, { name: "FiniteIncantatem", image: "https://s31.postimg.cc/gyp0wsml7/Finite_Incantatem.png" }, { name: "Giselle", image: "https://s31.postimg.cc/i0z7fbi97/Giselle.png" }, { name: "Juno", image: "https://s31.postimg.cc/5mcfezygr/Juno.png" }, { name: "Lianake", image: "https://s31.postimg.cc/kv2cssfaj/Lianake.png" }, { name: "Ligeia", image: "https://s31.postimg.cc/mzmptvomz/Ligeia.png" }, { name: "Noa", image: "https://s31.postimg.cc/a88jnc4kb/Noa.png" }, { name: "Oase", image: "https://s31.postimg.cc/v54rs1kln/Oase.png" }, { name: "Shiri", image: "https://s31.postimg.cc/ze9hu7vkr/Shiri.png" }, { name: "CompetitieTeam", image: "https://s31.postimg.cc/w7eyajdor/Competitie_Team.png" }];

var shuffleCards = function shuffleCards() {
	var cards = [].concat(_.cloneDeep(CardTypes), _.cloneDeep(CardTypes));
	return _.shuffle(cards);
};
new Vue({
	el: "#app",

	data: {
		showSplash: false,
		cards: [],
		started: false,
		startTime: 0,
		turns: 0,
		flipBackTimer: null,
		timer: null,
		time: "--:--",
		score: 0
	},

	methods: {
		resetGame: function resetGame() {
			this.showSplash = false;
			var cards = shuffleCards();
			this.turns = 0;
			this.score = 0;
			this.started = false;
			this.startTime = 0;

			_.each(cards, function (card) {
				card.flipped = false;
				card.found = false;
			});

			this.cards = cards;
		},
		flippedCards: function flippedCards() {
			return _.filter(this.cards, function (card) {
				return card.flipped;
			});
		},
		sameFlippedCard: function sameFlippedCard() {
			var flippedCards = this.flippedCards();
			if (flippedCards.length == 2) {
				if (flippedCards[0].name == flippedCards[1].name) return true;
			}
		},
		setCardFounds: function setCardFounds() {
			_.each(this.cards, function (card) {
				if (card.flipped) card.found = true;
			});
		},
		checkAllFound: function checkAllFound() {
			var foundCards = _.filter(this.cards, function...