JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="l-pic-index"></div><!--左转轴-->
  <div class="r-pic-index"></div><!--右转轴-->
  <div class="l-bg-index"></div>
  <div class="r-bg-index"></div>
  <div class="main-index">
   <!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
  
     <div class="intro-text">
		 <div class="first">奉</div>
		 <div>天承運皇帝詔曰</div>
		 <div>用盡我所有努力絞盡我所有腦力經過我千思萬想獻你我一片心意恰似比洛陽紙貴更勝似千金一擲祝君平安福氣多日進斗金財富來</div>
     </div>
  </div>
 </div>

CSS

body,ul,li,p,h1,h2,h3,h4,h5{
 margin:0;
 padding:0;
 font-size:100%;
}
body{
 font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 background: yellow;
}
img{
 border:0;
}
.content{
 position: relative;
 margin: 40px 0 0 -21px;
 width: 500px;
 height: 460px;
}
.l-pic-index{
 position: absolute;
 left: 200px;
 top: 1px;
 z-index:2;
 width:50px;
 height:460px;
 background: url("https://i.imgur.com/muLgAEn.png") no-repeat right 0;
}
.r-pic-index{
 position: absolute;
 right: 200px;
 top: 0;
 z-index: 2;
 width:50px;
 *width:82px;
 height:460px;
 background: url("https://i.imgur.com/C1a5S59.png") no-repeat left 0;
}
.l-bg-index{
 position: absolute;
// top: 20px;/*中间转轴位置*/
 left: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/ospnj28.png") right 0 no-repeat;
}
.r-bg-index{
 position: absolute;
 right: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/9Kl8d5Y.png") 0 0 no-repeat;
}
.main-index{
 display: none;
 overflow: hidden;
 zoom:1;
 position: absolute;
 z-index: 5;
 width:900px;
 height:250px;
 left:95px;
 top:75px;
 color: #2e2e2e;

}
.intro-text{
 writing-mode: vertical-rl;
 font-size:32px;

}


 .first
{
	text-indent:1em;
	
}

JavaScript

//卷轴展开效果 Document Ready
  $(".l-pic-index").animate({'left':'50px','top':'0px'},1450);
  $(".r-pic-index").animate({'right':'-60px','top':'0px'},1450);
  $(".l-bg-index").animate({'width':'236px','left':'73px'},1500);
  $(".r-bg-index").animate({'width':'236px','right':'-38px'},1500,function(){
   $(".main-index").fadeIn(800);
  });