JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="halfpages">
<div class="pageflip-wrapper">

<div class="pageflip"></div>
</div>
<div class="halfpage">
<img src="https://v.wpimg.pl/b2QtMS5qTVMwFjtgGgpARnNObzBFGT1fMBkucRlTFxBrVmJiB0NTAGhbfGQERlYAYkV_ZgVGVR04Gjk2RxABRjgCKH5THg1WfEVjOUUWQE8" alt="">
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle">
    <polygon points="0,40 100,0 0,100 200"/>
  </svg> -->
<!--<h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h1>
<p>
Optio sunt laudantium, amet asperiores, facere ex. Sed ut porro eum delectus illum impedit. Doloremque unde ratione, facilis nisi numquam labore beatae.
</p> -->
</div>
<div class="halfpage2">
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle">
    <polygon points="0,40 100,0 0,100 200"/>
  </svg> -->
  <img src="https://mamc.wpcdn.pl/128837/1714131106118/me-interactive4.png" alt="">
<!-- <h1>
Consequuntur hic cupiditate, culpa, fugit porro illo deleniti, 
</h1>
<p>
beatae repellat, earum architecto debitis officia distinctio eaque odit reprehenderit consectetur esse velit? Debitis.
</p> -->
</div>
</div>

CSS

.halfpages {
  width: 300px;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.halfpage {
  width: 300px;
  height: 250px;
  overflow: hidden;
  background: tomato;
  color: white;
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  animation: 1s linear 3s infinite alternate pagechange;
  /* transform: scaleY(-1); */
  /* padding: 20px; */
  box-shadow: 3em 5em 1em gold;
  filter: drop-shadow(-3px 22px 10px rgba(50, 50, 0, 0.5));
}

.halfpage2 {
  width: 300px;
  height: 250px;
  /* padding: 20px; */
  overflow: hidden;
  box-sizing: border-box;
  background: maroon;
  color: white;
  position: absolute;
  z-index: 1;
  box-shadow: 10px 5px 5px red;
}

.pageflip-wrapper {
  filter: drop-shadow(-3px 10px 10px rgba(50, 50, 0, 0.5));
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.pageflip {
  position: absolute;
  /* transform: scaleY(-1); */
  z-index: 3;
  overflow: visible;
  /* opacity: .9; */
  /*width: 100%;
  height: 150%;
  bottom: -25%; */
  /* clip-path: polygon(60% 35%, 100% 0, 100% 100%, 87% 100%); */
  animation: 1s linear 3s infinite alternate pageflip;
  background: linear-gradient(90deg, rgba(255,255,255,1) 38%, rgba(241,241,241,1) 48%, rgba(238,238,238,1) 78%, rgba(228,228,228,1) 91%, rgba(97,97,97,1) 100%);
  box-shadow: 3em 5em 1em gold;
  /* background: #CCC; */
}

/* 
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(94% 0, 86% 4%, 100% 100%, 100% 100%);
clip-path: polygon(84% 0, 65% 4%, 84% 100%, 91% 100%);
clip-path: polygon(76% 0, 51% 4%, 74% 100%, 86% 100%);
clip-path: polygon(65% 0, 30% 5%, 48% 100%, 74% 100%);
clip-path: polygon(48% 0, 14% 5%, 34% 100%, 65% 100%); raise
clip-path: polygon(48% 0, 8% 1%, 13% 100%, 51% 100%);
clip-path: polygon(43% 0, 0 0, 0 100%, 37% 100%);
clip-path: polygon(34% 0, 0 0, 0 100%, 22% 100%);
clip-path: polygon(21% 0, 0 0, 0 100%, 11% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
*/

@keyframes pagechange {
  0% {
    clip-path:...