JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="actualcss.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<div class="main">
    <div class="row">
    <div class="column">
    <!-- a lot of text -->
        <button class="collapsible btn" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)">I'll tell you</button>
        <div class="collapsible-content" id="collapsible-section-0">
           <!-- a lot of text -->
        <hr>
        <p id="date" style="margin-left: 45%;"></p>
        <hr>
        <div class="calendar">
            <div onclick="checkdate(1)">
                 <div class="scene scene--card">
                     <div class="card">
                         <div class="card__face card__face--front i1"></div>
                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>
                     </div>
                </div>
            </div>
            <div onclick="checkdate(2)">
                <div class="scene scene--card">
                     <div class="card">
                         <div class="card__face card__face--front i2"></div>
                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>
                     </div>
                </div>
            </div>
            <!-- this keeps going -->
            <div onclick="checkdate(22)">
                <div class="scene scene--card">
                     <div class="card">
                         <div class="card__face card__face--front i22"></div>
                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>
                     </div>
                </div>
...

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: Frank,Helvetica Neue,Helvetica,Arial,sans-serif;
  margin: 0;
  font-size: 100%;
  line-height: 1.5;
  font-weight: 400;
  background-color: #F6F5FE;
  color: #3F3F3F;
  width: 100%;
  text-align: left justify;
  height: 100%;
}

.main {
  width: 100%;
  position: relative;
  top: 250px;
  height: 100%;
  background-color: #F6F5FE;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row {
    display: inline-block;
    max-width: 800px;
}
.column p{
    font-size: 1.2em;
}

.collapsible {
  background-color: transparent;
  color: #444;
  cursor: pointer;
  width: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible-content {
  max-height: 0;
  padding: 1px;
  overflow: hidden;
  transition: max-height 1.5s ease-out;
}

.collapsible-content-shown-by-default {
  max-height: 100%;
  padding: 10px;
  overflow: hidden;
  transition: max-height 1.55s ease-out;
}
.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  border-color: #CC8E8E;
  color: #FFC3C3;
  background-image: linear-gradient(45deg, #CC8E8E 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  transition: background 300ms ease-in-out;
}
.btn:hover, .btn:focus {
  color: #FFC3C3;
  outline: 0;
}

.btn:hover {
  background-position: 0;
}

.scene {
  width: 400px;
  height: 400px;
  border: none;
  margin: 10px 0;
  perspective: 600px;
  margin-left: 25%;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1.5s;
  transform-style: preserve-3d;
  cursor: pointer;
  position:...

JavaScript

function toggleCollapsibleSectionWithAnimation() {
  this.classList.toggle("collapsible-active");
  var buttonId = this.id;
  var sectionId = buttonId.replace("button","section");
  var content = document.getElementById(sectionId);
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
}

    n =  new Date();
    y = n.getFullYear();
    m = n.getMonth() + 1;
    d = n.getDate();
    document.getElementById("date").innerHTML = d + "/" + m + "/" + y;


    var card = document.querySelector('.card');
    $('.scene').on('click', function() {
    $(".card", this).toggleClass("is-flipped");
});

    function checkdate(selectday) {
    var dateselect = new Date (2020, 10, selectday);
    var card = document.querySelector('.card');
    var datenow = new Date();
    if (datenow > dateselect) {
            $('.scene').select(function() {
            $(".card", this).toggleClass("is-flipped");
});
    } else {
        alert ("No cheating!");
    }
}