JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="email">
   					<li>
						<div  style="width:180px;height:180px;margin-bottom:10px;background-color:green"/>
      						<div style="width:250px;height:200px;margin-left:5px;margin-bottom:10px;background-color:red" />
						</li>
					</ul>

CSS

<style>                             
				#email
   						{ 
							list-style:none; margin:100px 0; height:550px; 
							
						}
 			#email li
   						{ 
							display:inline; 
							float:left;
   							-webkit-perspective: 500; 
							-webkit-transform-style: preserve-3d;
   							-webkit-transition-property: perspective; 
							-webkit-transition-duration: 0.5s;
							-moz-perspective: 500; 
							-moz-transform-style: preserve-3d;
   							-moz-transition-property: perspective; 
							-moz-transition-duration: 0.5s; 
						}
   		       #email li:hover
   						{
							-webkit-perspective: 5000; 
							-moz-perspective: 5000;
							
							
						}
			#email li div
   						{ 
							border:10px solid #fcfafa; 
							-webkit-transform: rotateY(30deg);
							-moz-transform: rotateY(30deg);
   							-moz-box-shadow:0 3px 10px #888; 
							-webkit-box-shadow:0 3px 10px #888;
   							-webkit-transition-property: transform; 
							-webkit-transition-duration: 0.5s; 
							-moz-transition-property: transform; 
							-moz-transition-duration: 0.5s; 
						
						
						
						}
		    #email li:hover div
   						{ 
							-webkit-transform: rotateY(0deg); 
							-moz-transform: rotateY(0deg);
							
						}