JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<body>


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

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