JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="slider-wrapper">
		<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>
            <input type="radio" name="slide" class="control" id="Slide5"/>
				<label for="Slide5" id="s5"></label>
            <input type="radio" name="slide" class="control" id="Slide6"/>
				<label for="Slide6" id="s6"></label>
            <input type="radio" name="slide" class="control" id="Slide7"/>
				<label for="Slide7" id="s7"></label>
            <input type="radio" name="slide" class="control" id="Slide8"/>
				<label for="Slide8" id="s8"></label>
            <input type="radio" name="slide" class="control" id="Slide9"/>
				<label for="Slide9" id="s9"></label>
            <input type="radio" name="slide" class="control" id="Slide10"/>
				<label for="Slide10" id="s10"></label>
            <input type="radio" name="slide" class="control" id="Slide11"/>
				<label for="Slide11" id="s11"></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>
                <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...

CSS

#slider-wrapper{
			width: 940px;
			height: 470px;
			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: -120px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s2{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -96px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s3{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -72px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
				
				#s4{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -48px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
		
				#s5{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -24px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}
		
				#s6{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: 0px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}		
		
				#s7{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: 24px;
					border-radius: 20px;
					opacity: 0.3;
					cursor: pointer;
					z-index: 999;
				}		
		
				#s8{
					padding: 6px;
					background: #FFFFFF;
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: 48px;
					border-radius:...