JSFiddle - React, Tailwind, and code Playground

by gene4000

HTML

<html>



<body>
<div class="main">

<h1>Подзаголовок H1</h1>
<p>Абазац
<h2>Подзаголовок H2</h2>
<p>Абазац


<div class="gallery">
	<ol>
		<li>
			<input type="radio" name="slide" checked="checked">
			<img src="http://pvbk.spb.ru/inc/slider/imgs/planet0.jpg">
		<li>
			<input type="radio" name="slide">
			<img src="http://pvbk.spb.ru/inc/slider/imgs/planet1.jpg">
		<li>
			<input type="radio" name="slide">
			<img src="http://pvbk.spb.ru/inc/slider/imgs/planet2.jpg">
		<li>
			<input type="radio" name="slide">
			<img src="http://pvbk.spb.ru/inc/slider/imgs/planet3.jpg">			
	</ol>
</div><!--gallery-->


</div> <!--main-->
</body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans|PT+Sans+Narrow&subset=cyrillic-ext,latin,cyrillic);

*{
	box-sizing:			border-box;
}

body{
	margin:0px;
	padding:0px;
	
	font-family:		"Open Sans", Calibri, Verdana, Helvetica, Arial, sans-serif;
	font-size:			14px;
	height:				100%;	
	
	/*
	background:#eee;
	*/
	background:			white;
	
	line-height:		1.5em;
}

.main{
	text-align:			left;
	
	margin:				0em auto 0em auto;
	
	max-width:			800px;
	
	background:			white;
}

p{
	margin:				0em 0em 0em 0em;
	padding:			0em 0em 0.7em 0em;
	
}

h1,h2{
	font-family:		"Open Sans", "Calibri", Verdana, Helvetica, Arial, sans-serif;
	font-size:			24px;
	font-weight:		bold;

	font-family:		"PT Sans Narrow", "Open Sans", Calibri, Verdana, Helvetica, Arial, sans-serif;
	font-size:			34px;
	font-weight:		normal;
	
	margin:				0.5em 0em 0.5em 0em; 
}

h2{
	font-size:			24px;
	font-weight:		normal;
	
	margin:				0.5em 0em 0.5em 0em; 
}

.gallery{
	margin:				2em 0em 2em 0em;
	padding:			6px;

	background:			#333;
	width:				100%;
	
	color:				white;
	
	text-align:			center;
}

.gallery img{
	padding:			0px;
	max-width:			100%;
	position:			absolute;
	top:				20px;
	left:				0px;
	
	display:block;
	
			visibility:hidden;
			opacity:0;

			transition: 		visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
			-webkit-transition:	visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
			-moz-transition:	visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;
			-o-transition:		visibility 0s linear 0.4s,opacity 0.4s ease-in-out 0s;		
}

.gallery ol{
	text-align:			left;
	position:			relative;			/* чтобы потом работал absolute для img */
	
	margin:				0em;
	padding:			0em;
	
	color:				white;
	
	list-style-type:	decimal;
	list-style-position:outside;
	
	background:			#333;
}

.gallery ol li{
	display:			inline-block;

	margin:				0em;
	padding:			0em 0.5em 0em 0.5em;
}

.gallery...