JSFiddle - React, Tailwind, and code Playground

by umam541

HTML

<header>
		<nav>
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Galery</a>
			<a href="#">Blog</a>
			<a href="#">Contact</a>
		</nav>
		<div class="container">
			<div class="welcome">
				<h1>SELAMAT DATANG</h1>
				<a href="#">Lihat Karya</a>
			</div>
		</div>
	</header>
	<div class="konten">
		<div class="container">
			<div class="about">
				<h2>ABOUT ME</h2>
				<p>Saya adalah seorang mahasiswa di STMIK bina sarana Global, saat ini saya sedang focus mempelajari Front-end Web Developer.</p>
			</div>
			<div class="Galery">
				
			</div>
		</div>
	</div>
	<div class="container">
		<div class="Blog">
			
		</div>
	</div>
	<div class="container">
		<div class="Contact">
			
		</div>
	</div>

CSS

*{
	padding: 0; margin: 0;
	font-family: sans-serif;
}

.container{
	margin: 0 auto;
	width: 80%;
}

header{
	background: url(https://i0.wp.com/www.splitshire.com/wp-content/uploads/2018/02/SplitShire-00781.jpg?w=840&ssl=1);
	background-size: cover;
	height: 662px;
}

nav{
	background: transparent;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	width: 100%;
	position: fixed;
	top: 0;
}

nav a{
	text-decoration: none;
	color: black;
	text-align: center;
	padding: 15px 30px;
}

.welcome{
	background-color: rgb(44,155,221, 0.7);
	color: white;
	font-size: 30px;
	text-align: center;
	padding: 30px 0;
}

.welcome a{
	display: block;
	border: 2px solid white;
	color: white;
	text-decoration: none;
	padding: 5px 0;
	margin: 25px auto 0 auto;
	width: 300px;
}

.welcome a:hover{
	background-color: white;
	transition: 300ms;
	color: #0074b9;
}
/* AKHIR HEADER */
/* KONTEN */
.about h2{
	font-size: 30px;
	text-align: center;
}