JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider-wrapper"><!--slider-->
		<div class="inner-wrapper">
			<input checked type="radio" name="slide" class="control" id="Slide1"/>
				<label for="Slide1" id="s1"></label>
			<input type="radio" name="slide" class="control" id="Slide2"/>
				<label for="Slide2" id="s2"></label>
			<input type="radio" name="slide" class="control" id="Slide3"/>
				<label for="Slide3" id="s3"></label>
			<input type="radio" name="slide" class="control" id="Slide4"/>
				<label for="Slide4" id="s4"></label>
			<div class="overflow-wrapper">
				<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
				<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
				<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
				<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
			</div>
		</div>
	</div>

CSS

#slider-wrapper{
			width: 600px;
			height: 300px;
			margin: 50px auto;
			position: relative;
			margin-bottom: 0px;
			background: rgba(0,0,0,0.5);
			overflow: hidden;

		}
		
				#s1{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -36px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
					

				}
				
				#s2{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -12px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s3{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: 12px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s4{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: 36px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}
				
			.inner-wrapper{
				width: 600px;
				height: 300px;
				position: absolute;
				top: 0;
				left: 0;
				margin-bottom: 0px;
				overflow: hidden;
			}
				.control{ display: none;}
				
				#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
				#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
				#Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
				#Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
				
				#Slide1:checked + #s1 { opacity: 1; }
				#Slide2:checked + #s2 { opacity: 1; }
				#Slide3:checked + #s3 { opacity: 1; }
				#Slide4:checked + #s4 { opacity: 1; }
				
			.overflow-wrapper{
				width: 400%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				overflow-y: hidden;
				z-index: 1;
				-webkit-transition: all 0.3s...