JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

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

</div> -->
<div class="pageflip"></div>
<div class="halfpage">
<!-- <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> -->
<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: 600px;
  overflow: hidden;
  position: relative;
}

.halfpage {
  width: 300px;
  height: 600px;
  overflow: hidden;
  background: tomato;
  color: white;
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  animation: 2s linear 0s infinite normal 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: 600px;
  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 22px 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;
  animation: 2s linear 0s infinite normal pageflip;
  background: linear-gradient(45deg, rgba(131, 58, 180, 1) 0%, rgba(131, 70, 150, 1) 50%, rgba(120, 60, 140, 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: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  15% {
    clip-path: polygon(0 0, 91% 0, 100% 100%, 0 100%);
  }

  30% {
    clip-path: polygon(0 0, 83% 0, 96% 100%, 0 100%);
  }

  45% {
   ...