JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<div id="flashcards"></div>

CSS

#flashcards{
  width:100%;
}
.flashcard{
  padding: 2em;
  border: 2px solid red;
  margin:10px;
  display: inline-block;
  text-align: center;
  position: relative;
  transition: 0.6s;
	transform-style: preserve-3d;
  
}
.flashcard::after{
  content: attr(data-value) " - " attr(data-counter);
  top:0;
  left: 0;
  width:100%;
  height:0;
  z-index:1;
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  color:white;
  transition: .2s all;
  visibility: hidden;
}
.flashcard:hover::after{
  height:100%;
  visibility: visible;
}

JavaScript

const $ = el => document.querySelector(el)
const flashcards = [
{
value: 'JS',
title: 'favourite lang'
},
{
value: 'CSS',
title: 'favourite lang 2'
}
]

const renderFlashcards = () => {
$('#flashcards').innerHTML = flashcards.map((data, index) => {
return `
<div class="flashcard" data-value="${data.value}" id="flashcard${index}" data-counter="0">
${data.title}
</div>
`
}).join('')
flashcards.forEach((el, i) => $(`#flashcard${i}`).addEventListener('mouseenter', count))
}
const count = e => {
let counter = e.target.getAttribute('data-counter')
console.log(counter)
counter++;
e.target.setAttribute('data-counter', counter)
}
renderFlashcards()