JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row intro slide">
				<img class="bg" src="http://3.bp.blogspot.com/-0tkymvJajoA/TbLKVR6zfqI/AAAAAAAAAEE/NGN8yC-A76s/s1600/Nature+Image.jpg">
				<div class="col-xs-12">
					<h1 class="h2-cover">Ingin belajar Qur'an <strong>gratis?</strong></h1>
					<p class="line-cover">
						Kami akan berikan pelatihan baca Qur'an gratis sepanjang yang Anda mau.
					</p>
					<a href="#" class="button round alert">Mau!</a>
					<a href="#" class="button round morelighter">Benarkah?</a>
				</div>
			</div>
			
			<div class="slide" style="background-color:green;">test</div>
			<div class="slide" style="background-color:black;">test</div>

CSS

body,html{
	margin:0px;
    padding:0px;
}
.intro{
	background-size: cover;
}
.bg{
	position:absolute;
    z-index:-1;
	width:100%;
	height:100%;
}	
.slide{
	width:calc(100vw); /*vw is viewport width*/
	height:calc(100vh);/*vw is viewport height*/
	position:relative;
}