JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://deanelliott.me/sly.js"></script>
<div id="example" class="example">

					<div class="frame">
					
						<ul>
							
							<li><img src="http://jumptheturnstyle.com/wp-content/uploads/87011-Sage-Francis.jpg"/></li>
                            
						</ul>
						
					</div><!--/.frame-->
					
				</div><!--/#example-->

CSS

#example {
		height: 200px;
		line-height: 200px;
		-webkit-perspective: 800px;
		-ms-perspective: 800px;
		perspective: 1000px;
		-webkit-perspective-origin: 50% 50%;
		-ms-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
		overflow-y: show;
	}
ul{
			-webkit-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;
			list-style:none;
}
li{
				width:275px;
				height:305px;
				position: relative;
				float:left;
				margin: 0 -40px;
				-webkit-transform: rotateY(60deg) scale(0.9);
				-ms-transform: rotateY(60deg) scale(0.9);
				transform: rotateY(60deg) scale(0.9);
				-webkit-transition: -webkit-transform 300ms ease-out;
				transition: transform 300ms ease-out;
}
 img{width:275px;height:275px}
li.active{
				z-index: 10;
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}
li.active ~ li{
				-webkit-transform: rotateY(-60deg) scale(0.9);
				-ms-transform: rotateY(-60deg) scale(0.9);
				transform: rotateY(-60deg) scale(0.9);
			}