JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/js/turn.min.js"></script>
<!--喜帖-->
<div id="wedding"  dir="rtl">
	<div class="hard"> 
	<img
  src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/cover.jpg"  class="cover_page" />   
	</div>
	
	<div class="hard">
        <section>
            
<div class="margin">謹詹於中華民國ｏｏｏ年<div class="text"><div>國曆ｏ月ｏ日</div><div>農曆ｏ月ｏ日</div></div>(星期ｏ)
    <br/ >
    為<div class="text"><div>ｏ男ｏｏ先生</div><div>ｏ女ｏｏ小姐</div></div>舉行婚禮典禮敬備喜筵	&nbsp;恭請
 
<div class="middle">
 <span class="welcome">闔第光臨</span>
           <div class="parents text">
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
           </div>
            <span class="bottom">鞠躬</span>
            </div>
 <span class="invite">恕邀</span>
            <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/div_bar.png" class="text" height="10">
            <div class="text">
            <div>席設：ｏ ｏ ｏ ｏ</div>
            <div>地址：ｏｏｏｏｏｏｏｏ<span class="number">888</span>號</div>
            <div>
           <a href="tel:123456789" target="_blank" tittle="打電話">電話：ｏｏｏｏｏｏｏｏｏ</a>
            </div>
            <div>
            時間：<a href="#" target="_blank" download="wedding.ics" title="加入行事曆">ｏｏｏｏ時準時入席</a></div> 
            </div>
            </div>
        </section>
    </div>
	<div class="hard">
   <section>
                  <br />
    <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/context.jpg" height="106" class="map"/>

                 <br /> <br /><br /> <br />  
               
            </section>
	</div>  
</div>
<!--end of 喜帖-->

CSS

@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);

body {
  margin: 0;
  padding: 0;
  background-color: lightpink;
  overflow: hidden;
}
/*
wedding card
*/    


section {
	-ms-writing-mode: tb-rl; /* old syntax. IE */
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl; /* new syntax */ 
  display:inline-block;
  vertical-align:middle;
  font-family: 'cwTeXKai', serif;
  font-size:12px;
  color: #acd8bf;
  text-align: justify;
}

section .text{
        display:inline-block;
        vertical-align:middle;
}
  

.cover_page{
        width: 200px;
        height: 300px;
         cursor:move;
}
    
    
.hard{
        background:  red;
       
}

/*
right page
*/    
    section .margin {
			margin-top: 2em;		
    }

    section .indent {
			text-indent: 2em;		
    }
       
    section .welcome{
         font-size: 12pt;
    }
    
    section .bottom{
        margin-top: 1em;
         font-size: 12pt;
        
    }
    
    section .middle{
        margin-right: 1em;
        margin-left: 1em;    
    }

   section .parents{
        margin-top: 2.9em;
  }
    
    section .invite{
       // text-indent: 2em;
        margin-bottom: 1em;
    }
    
  
     section .invite_text{
        font-size: 0.5rem;
    }


    section .number { text-combine-upright: all }

    a {
        text-decoration: none;
        color: #acd8bf;        
    }

JavaScript

$("#wedding").turn({
		width:  400,
		height: 300,
    elevation: 50,
    gradients: true,
		autoCenter: true,
});