JSFiddle - React, Tailwind, and code Playground

HTML

<input checked type=radio name=respond id=desktop />
	<input type=radio name=respond id=tablet />
	<input type=radio name=respond id=mobile />
	
	<article id=slider>
		

		<!-- MaxWidth Options -->

		
	
		<!-- Slider Setup -->
	
		<input checked type=radio name=slider id=slide1 />
		<input type=radio name=slider id=slide2 />
		<input type=radio name=slider id=slide3 />
		<input type=radio name=slider id=slide4 />
		<input type=radio name=slider id=slide5 />
	
	
		<!-- The Slider -->
		
		<div id=slides>
		
			<div id=overflow>
			
				<div class=inner>
				
					<article>
						<div class=info><h3>Cloud Dragon</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
						<img src=http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png />
					</article>
					
					<article>
						<div class=info><h3>Mountain Fort</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
						<img src=http://csscience.com/responsiveslidercss3/MountainFortByBjzaba.png />
					</article>
					
					<article>
						<div class=info><h3>Mountain Outpost</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
						<img src=http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png />
					</article>
					
					<article>
						<div class=info><h3>Cliffs</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
						<img src=http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png />
					</article>
					
					<article>
						<div class=info><h3>Hill Fort</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
						<img src=http://csscience.com/responsiveslidercss3/HillFortByBjzaba.png />
					</article>
					
				</div> <!-- .inner -->
				
			</div> <!-- #overflow -->
		
		</div> <!-- #slides -->
	
	
		<!-- Controls and Active Slide Display -->
	
		<div id=controls>

			<label for=slide1></label>
			<label for=slide2></label>
			<label for=slide3></label>
			<label...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }
body {
  line-height: 1; }
ol, ul {
  list-style: none; }
table {
  border-collapse: collapse;
  border-spacing: 0; }
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }
q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }
a img {
  border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

body {
  font: 14px/22px Arial, Helvetica, sans-serif;
  color: #333;
  background: #ddd;
  margin: 50px auto;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:bold;
	font-size: 16px;
	margin: 12px 0;
}

h1 {
	margin: 35px 0 5px;
	font-size: 26px;
	font-weight: normal;
}

#slider {
	text-align: center;
}

h2 {
	margin: 40px 0 25px;
	border-bottom: 1px solid #bbb;
	padding: 0 0 10px;
}

p {
	margin: 0 0 16px;
}

strong { 
	font-weight: bold;
}

label, a {
	color: teal;
	cursor: pointer;
	text-decoration: none;
}
label:hover, a:hover {
	color: #000 !important;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
.catch { display: block; height: 0; overflow: hidden; }
#slider {
	margin: 0 auto;
}
#description {
	margin: 25px auto;
	text-align: left;
	max-width: 650px;
	padding: 0...

JavaScript

var next = function()
{
    var active = document.querySelector("input[name=slider][checked]");
    var next = document.querySelector("input[name=slider]#slide" + ((active.id[5] * 1) % 5 + 1));
    active.removeAttribute("checked");
    next.setAttribute("checked", "");
};
setInterval(next, 1000);