JSFiddle - React, Tailwind, and code Playground

by Papadan

HTML

<div class="all-wrap">

<!-- Containers with information -->

<div id="a" class="aa hide ">
    <div id="a2" class="text-wrap hide hide-all">
    <h2>X of Cards</h2>
    <p>First Displayed Text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol1"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/924/2D__57497.1440113502.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div> 
</div>

<div id="b" class="ab hide">
    <div id="b2" class="text-wrap hide hide-all">
    <h2>Y of Cards</h2>
    <p>Second displayed text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol2"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/928/6D__92916.1440113530.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div>
</div>

<div id="c" class="ac hide">
    <div id="c2" class="text-wrap hide hide-all">
<h2>Z of Cards</h2>
    <p>Third displayed text</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards lol3"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" width="200px" height="300px">
        <img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
    </div>
</div>

<div id="last" class="hide">
    <div id="last2" class="text-wrap hide hide-all">
<h2>Last of Cards</h2>
    <p>The last card in the deck</p>
    </div>
    <div class="pulled-card-container">
        <img class="cards"...

CSS

body, html{
height: 100%;
margin: 0;
background-color: #333;
}
/* Background card */

.bgcard{
width:9.4vw;
display: inline-block;
position:absolute;
left:35.4%;
top:66.2%;
cursor: pointer;
}

/* Animation making card unclickable start */

.animstart{
animation-name: examples;
animation-duration: 1s;
}

@keyframes examples {
    0%   { pointer-events: none;}
    100% { pointer-events: none;}
}

.cards{
z-index: 100;
transform: rotateY(180deg);
width: 14vw;
font-size: 1.2vw;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flip;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

@keyframes flip {
from { transform: rotateY(180deg); left: -10vw; }
to { transform: rotateY(0deg); left: 0vw; }
}

 @keyframes flips {
from { transform: rotateY(0deg); left: -10vw; }
to { transform: rotateY(180deg); left: 0vw; }
}

.frontcard {
width: 14vw;
z-index: 200;
transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flips;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}

.frontcard, .back {
backface-visibility: hidden;
position: absolute;
}

.text-wrap{
padding-left: 200px;
width: 50vw;
position: absolute;
}

p{
top: 10%;

animation-name: hidden;
animation-duration: 0.6s;
}

h2{
top: 5%;
animation-name: hidden;
animation-duration: 0.6s;
}

.pulled-card-container{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
z-index: 100;
perspective: 1000;
}

.pulled-card-container-done{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
}

@keyframes example {
    0%   { left:-10vw;}
    25%  { left:0px;}
    50%  { left:0px;}
    75%  { left:0px;}
    100% { left:0px;}
}

  @keyframes hidden {
    0% {opacity: 0;}
    25%  {opacity: 0;}
    50%  {opacity: 0;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}

.no-click{
pointer-events: none;
cursor: none;
}

.hide{
display: none; 
}

.hideanim{
  opacity: 1;
 ...

JavaScript

// Functions for displaying the random content when card is clicked

var backgroundImage = document.getElementById("bg");

function first_function(){
console.log("test1");
document.getElementById("a").classList.remove("hide");
  document.getElementById("a2").classList.remove("hide");
document.getElementById("a").style.color = "white";
}

function second_function(){
console.log("test2");
document.getElementById("b").classList.remove("hide");
  document.getElementById("b2").classList.remove("hide");
document.getElementById("b").style.color = "white";
}

function third_function(){
console.log("test3");
document.getElementById("c").classList.remove("hide");
document.getElementById("c2").classList.remove("hide");
document.getElementById("c").style.color = "white";
}

function last_card(){
console.log("last one");
document.getElementById("last").classList.remove("hide");
document.getElementById("last2").classList.remove("hide");
document.getElementById("last").style.color = "white";
}

// Splice array 1 item at a time

Array.prototype.randsplice = function () {
var randomnbr = Math.floor(Math.random() * this.length);
// Removed extra variable
return this.splice(randomnbr, 1);
};

// Use an eventlistener to wait for the DOM to load so that we can depend on DOM elements being available

window.addEventListener("load",function(){

// Setup the array we will use for this example
var my_array = [
    first_function,
    second_function,
    third_function,
];

// Attach a click event handler to our button

backgroundImage.onclick = function(){

// Hide content after each click

var list = document.getElementsByClassName("hide-all");
for(var i=0;i<list.length;i++){
list[i].classList.add("hide");
}

// Modify my_array and display result

if(my_array.length > 0){   
var new_numb = my_array.randsplice();
new_numb[0].apply(null);

// Animation making card unclickable until animation is complete 

backgroundImage.classList.add("animstart");
backgroundImage.addEventListener(...