JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content bg-slider">
	<div class="wrapper">
		<h1 class="sectionTitle">Image title 1</h1>
		<div class="separator white"></div>
		<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>

		<div class="nav-wrapper">
			<div class="nav-arrows prev"></div>
			<div class="nav-dots">
				<div class="current"></div>
				<div class=""></div>
				<div class=""></div>
			</div>
			<div class="nav-arrows next"></div>
		</div>
	</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* -- COMMON -- */

body {
	font: 400 14px 'Montserrat', Helvetica, sans-serif;

	letter-spacing: 2px;
	text-transform: uppercase;

	color: white;
}

.separator {
	width: 24px;
	height: 4px;
}
.separator.white {
	background-color: white;
}
.separator.black {
	background-color: black;
}

/* -- MENU -- */



/* -- CANVAS -- */

.content {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	overflow: hidden;

	width: 100%;
	height: 100%;
}

.wrapper {
	position: absolute;
	right: 0;
	bottom: 100px;
	left: 0;

	width: 33.333333333%;
	margin: 0 auto;
}

.sectionTitle {
	font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
	line-height: 24px;

	margin-bottom: 24px;

	letter-spacing: 4px;
}
.sectionDescription {
	font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;

	margin-top: 24px;
}

/* -- SLIDER -- */

.bg-slider {
	background: url(../img/slides/image1.jpg) no-repeat center center fixed;
    background-color: red; /* demo purpose only */
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

/* -- SLIDER - NAVEGATION -- */

.nav-wrapper {
	display: inline-block;

	min-width: 250px;
	margin-top: 24px;

	padding: 4px;
}

/* -- SLIDER - NAVEGATION ARROWS -- */

.nav-arrows {
	float: left;

	width: 20px;
	height: 20px;

	cursor: pointer;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);

	border: 4px solid white;
}

.nav-arrows.prev {
	border-top: none;
	border-right: none;
}

.nav-arrows.next {
	border-bottom: none;
	border-left: none;
}

/* -- SLIDER - NAVEGATION DOTS -- */

.nav-dots {
	margin: 0px 8px;

	float: left;
}

.nav-dots div{
	float: left;

	width: 12px;
	height: 12px;
	margin: 4px 18px;

	cursor: pointer;

	border-radius: 50%;
	background:...