JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<body>
<div class="main">

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

<div class="gallery">

	<input id="g1i1" type="radio" name="slide" checked="checked"><label for="g1i1"></label>
	<img src="http://pvbk.spb.ru/inc/slider/imgs/planet0.jpg">

	<input id="g1i2" type="radio" name="slide"><label for="g1i2"></label>
	<img src="http://pvbk.spb.ru/inc/slider/imgs/planet5.jpg">

	<input id="g1i3" type="radio" name="slide"><label for="g1i3"></label>
	<img src="http://pvbk.spb.ru/inc/slider/imgs/planet1.jpg">

	<input id="g1i4" type="radio" name="slide"><label for="g1i4"></label>
	<img src="http://pvbk.spb.ru/inc/slider/imgs/planet2.jpg">			

	<input id="g1i5" type="radio" name="slide"><label for="g1i5"></label>
	<img src="http://pvbk.spb.ru/inc/slider/imgs/planet3.jpg">		
	
</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:			10px 0px 0px 0px;

	background:			#333;
	
	width:				100%;
	height:				450px;
	
	color:				white;

	position:			relative;			/* чтобы потом работал absolute для img */
	
	overflow:			hidden;
	
	white-space:		nowrap;
}

.gallery img{
	display:			block;
	padding:			0px;
	padding:			6px;
	
	max-width:			100%;
	max-height:			90%;
	
	position:			absolute;

	top:				30px;
	left:				50%;
	margin-top:			25%;
	transform:			translate(-50%,-50%);
	
	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 input[type="radio"]{
	/*
	margin:				0em 0.4em 0em 0.4em;
	padding:			0em 0.4em 0em...