JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<input type="radio" name="tab" id="tab1" class="itabs" checked="checked" />
	<input type="radio" name="tab" id="tab2" class="itabs" />
	<input type="radio" name="tab" id="tab3" class="itabs" />
	<input type="radio" name="tab" id="tab4" class="itabs" />
	<div class="slideshow">
		<div class="pic1">
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p1.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p2.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p3.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p4.jpg" alt="" />
		</div>
		<div class="pic2">
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p5.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p6.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p7.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p8.jpg" alt="" />
		</div>
		<div class="pic3">
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p9.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p10.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p11.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p12.jpg" alt="" />
		</div>
		<div class="pic4">
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p13.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p14.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p15.jpg" alt="" />
			<img src="http://www.cssplay.co.uk/menu/rotaryslide/p16.jpg" alt="" />
		</div>
	</div>
	<label for="tab1" class="tabs pos1" accesskey="1"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label>
	<label for="tab2" class="tabs pos2" accesskey="2"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label>
	<label for="tab3" class="tabs pos3" accesskey="3"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt=""...

CSS

.slideshow {width:750px; height:400px;}
.slideshow div {width:180px; height:270px; position:absolute; background:#f9f9f9; border:10px solid #fff; top:10px; overflow:hidden;}
.slideshow div.pic1 {left:-10px; z-index:100;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.slideshow div.pic2 {left:180px; z-index:90;
-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg); 
-ms-transform: rotate(-5deg); 
-o-transform: rotate(-5deg); 
transform: rotate(-5deg); 
}
.slideshow div.pic3 {left:370px; z-index:80;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.slideshow div.pic4 {left:560px; z-index:70;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.slideshow div img
{display:block; position:absolute; left:0; top:0;
-webkit-transform-origin:90px 600px;
-moz-transform-origin:90px 600px;
-ms-transform-origin:90px 600px;
-o-transform-origin:90px 600px;
transform-origin:90px 600px;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

#tab1:checked ~ .slideshow .pic1 img:nth-of-type(1),
#tab2:checked ~ .slideshow .pic1 img:nth-of-type(2),
#tab3:checked ~ .slideshow .pic1 img:nth-of-type(3),
#tab4:checked ~ .slideshow .pic1 img:nth-of-type(4) {
-webkit-transition: 0.6s 0.9s;
-moz-transition: 0.6s 0.9s;
-ms-transition: 0.6s 0.9s;
-o-transition: 0.6s 0.9s;
transition: 0.6s 0.9s;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
#tab1:checked ~ .slideshow .pic2 img:nth-of-type(1),
#tab2:checked ~ .slideshow .pic2 img:nth-of-type(2),
#tab3:checked ~ .slideshow .pic2...