JSFiddle - React, Tailwind, and code Playground

HTML

<div id="onw" class="envelope">
	<p>From: <span>LOREM</span></p>
	<p>To: <span>IPSUM</span></p> 
  </div>
  <div class="open"></div>
  <div id="onee" class="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<p>Lorem ipsum dolor sit amet</p>
  </div>
</body>

CSS

@font-face {
  font-family: 'Norican';
  font-style: normal;
  font-weight: 400;
  src: local('Norican Regular'), local('Norican-Regular'), url(http://themes.googleusercontent.com/static/fonts/norican/v1/WG5BKl7e-3DIN75Tz4bREg.woff) format('woff');
}

@font-face {
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Bilbo Swash Caps'), local('BilboSwashCaps-Regular'), url(http://themes.googleusercontent.com/static/fonts/bilboswashcaps/v4/UB_-crLvhx-PwGKW1oosDpbko4ywDBcg2f1uYutDOWY.woff) format('woff');
}

 
 .open{ 	
 	position:absolute;
 	top:60%;
 	left:50%;
 	margin-left:-250px;
 	margin-top:-150px;
 	width:0;
 	height:0;
 	border:solid 250px transparent;
 	border-top:solid 150px #E3E3E3;
 	border-bottom:none;
 	z-index:3;
 	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;

	-webkit-transform: perspective(500);
	-moz-transform: perspective(500);
	transform: perspective(500);

	-webkit-transition: all 2.0s 200ms linear;
	-moz-transition: all 2.0s 200ms linear;
	transition: all 2.0s linear;
	-webkit-filter: drop-shadow(0 0 0 gray);
 }

 .envelope > p{
 	position:absolute;
 	right:15px;
 	bottom:25px;
 	font-family: 'Norican';
 	color:#00698C;
 	text-shadow:0 1px 0 black;
 	font-size:15px;
 }
 
 .envelope  span{
 	font-family: 'Arial';
 	font-weight:bold;
 }

 
 .envelope > p:nth-child(2){
 	bottom:0;
 }

 .envelope{
 	position:absolute;
	left:50%;
	top:60%;
 	width:500px;
 	height:300px;
 	margin-left:-250px;
 	margin-top:-150px;
 	background: #EBEBEB;
 	background: -webkit-linear-gradient(90deg, #EBEBEB 0%, #F7F7F7 50%);
	background: -moz-linear-gradient(90deg, #EBEBEB 0%, #F7F7F7 50%);
	background: linear-gradient(90deg, #EBEBEB 0%, #F7F7F7 50%);

	box-shadow:0 1px 5px -2px black;
	
 }
 

 .content{	
 	position:absolute; 
 	top:60%;
 	left:50%;
 	margin-left:-200px;
 	margin-top:-150px;
 	width:400px; 	
 	height:0;
	overflow:hidden;
 	background:#00698C;
  background:...