JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <div class="flip-card">
   <div class="flip-card-inner">
     <div class="flip-card-front">
       <span id="myFlashcardQuestion1"></span>
     </div>
     <div class="flip-card-back">
       <span id="myFlashcardAnswer1"></span>
     </div>
   </div>
 </div> -->

<div id="allCards"></div>

CSS

.flip-card {
  background-color: transparent;
  width: 350px;
  height: 175px;
  margin:  20px auto;
  padding: 5px 5px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  background-color: lightblue;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: lightblue;
  width: 350px;
  height: 175px;
  color: black;
  font-size: 35px;
  text-alignment: center;
}

.flip-card-back {
  background-color: red;
  color: white;
  font-size: 35px;
  text-alignment: center;
  transform: rotateY(180deg);
}

JavaScript

/*	after getting the values lets fill in the card 
		i will only use a counter for illustration 		*/

const allCards = document.getElementById("allCards");
for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data
  var flipcard = document.createElement("div");
  var flipcard_inner = document.createElement("div");
  var flipcard_front = document.createElement("div");
  var flipcard_back = document.createElement("div");
  flipcard.className = "flip-card";
  flipcard_inner.className = "flip-card-inner";
  flipcard_front.className = "flip-card-front";
  flipcard_back.className = "flip-card-back";

  flipcard_front.textContent = "Question " + i;
  flipcard_back.textContent = "Answer " + i;

  flipcard_inner.appendChild(flipcard_front);
  flipcard_inner.appendChild(flipcard_back);
  flipcard.appendChild(flipcard_inner);
  allCards.appendChild(flipcard);
}