JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

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

</div> -->
<div class="pageflip">
  <div class="gradient"></div>
</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: 15s 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));
}

.gradient {
  /* width: 300px; */
  height: 150%;
  overflow: hidden;
  background: green;
  width: 100px;
  color: white;
  position: absolute;
  right: 0;
  top: -25%;
  box-sizing: border-box;
  z-index: 3;
  animation: 15s linear 0s infinite normal gradient;
  /* transform: scaleY(-1); */
  padding: 20px;
  background: linear-gradient(90deg, rgba(241, 241, 241, 1) 88%, rgba(213, 213, 213, 1) 92%, rgba(255, 255, 255, 1) 95%, rgba(97, 97, 97, 1) 100%);
}

.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;
  width: 100%;
  height: 100%;
  /* animation: 15s linear 0s infinite normal pageflip; */
  background: linear-gradient(90deg, rgba(241, 241, 241, 1) 88%, rgba(213, 213, 213, 1) 92%, rgba(255, 255, 255, 1) 95%, rgba(97, 97, 97, 1) 100%);
  background-position: 100% 200%;
  /*   background: linear-gradient(45deg, rgba(131, 58, 180, 1) 0%, rgba(131, 70, 150, 1) 50%, rgba(120, 60, 140, 1) 100%); */
  /* background: linear-gradient(to right, red 80%, blue 92%, green 95%, yellow 100%); */
  /* background-size: 100px; */
  /* filter: blur(3em);
  opacity: .9; */
  /* box-shadow: 3em 5em 1em gold; */
  /*...