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 -->
		
		<div class=respond>
		
			<label class=desktop for=desktop></label>
			<label class=tablet for=tablet></label>
			<label class=mobile for=mobile></label>
			<p><strong>Важно:</strong> Если вы хотите изменить размер окна вручную, настройте на разрешение рабочего стола. Или вы можете просто щёлкнуть по значку.</p>
		
		</div> <!-- .respond -->
		
	
		<!-- 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>
                        <a href="//google.ru">
                            <img src="http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png" />
                            <div class=info><img src="http://placehold.it/100x100/a0522d/a52a2a" /><h3>Cloud Dragon</h3></div>
                        </a>
					</article>

					
					<article>
                        <a href="//google.ru">
                            <img src="http://csscience.com/responsiveslidercss3/MountainFortByBjzaba.png" />
                            <div class=info><img src="http://placehold.it/100x100/a0522d/a52a2a" /><h3>Mountain Fort</h3></div>
                        </a>
					</article>
					
					<article>
                        <a href="//google.ru">
                            <img src="http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png" />
                            <div class=info><img src="http://placehold.it/100x100/a0522d/a52a2a" /><h3>Mountain Outpost</h3></div>
                        </a>
					</article>
					
					<article>
               ...

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...