JSFiddle - React, Tailwind, and code Playground

by azhari

HTML

<div class="menu">
		<div class="content">
			<ul>
				<li><a class="active" href="#">Home</a></li>
			<li><a href="#">Berita</a></li>
			<li><a href="#">Gallery</a></li>
			<li><a href="#">Hubungi Kami</a></li>
			<li><a href="#">Buku Tamu</a></li>
			</ul>
		</div>
	</div>
	<div class="main">
		<div class="content">
			<h1>Membuat Menu Yang Tetap Dan Responsive</h1>	<br />		
			<p>Ini adalah bagian isi</p>
			<p>Ini adalah bagian isi 2</p>			
		</div>
	</div> <!-- /.main -->
	
	<div class="footer">
		<div class="content">
			<p>
        Ini adalah bagian footer
			</p>
		</div>
	</div>

CSS

*{
			padding: 0;margin: 0;
}
a{
			text-decoration: none;
			color: #000;
}
    
.menu{
			background-color: #1484CE;
			background-image: -webkit-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -moz-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -o-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -ms-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			-webkit-box-shadow: 0 2px 0 #0E5A8C;
			box-shadow: 0 2px 0 #0E5A8C;
			font-size: 13px;
			height: 30px;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			width: 100%;

}
.menu .content ul{
				list-style-type: none;
				float: left;
}
.menu .content ul li{
					display: inline;
				}
.menu .content ul li a{
						display: inline-block;
						text-decoration: none;
						padding: 7px 10px;
						border-right: 1px solid rgba(255, 255, 255, 0.125);
						color: #f8f8f8;
						font-weight: bold;
}
.fly .content ul li a:hover, .fly .content ul li a.active{
						background: -webkit-linear-gradient(top, #2b90d2, #1382cb);
						background: -moz-linear-gradient(top, #2b90d2, #1382cb);
						background: -o-linear-gradient(top, #2b90d2, #1382cb);
						background: -ms-linear-gradient(top, #2b90d2, #1382cb);
						background: linear-gradient(top, #2b90d2, #1382cb);
}

.content{
			max-width: 940px;
			margin: 0 auto;
}

.main{
			margin-top:50px;
			margin-bottom: 50px
}
.main .content p{
				margin-bottom: 30px;
}

.footer{
			padding: 10px 0;
			background: -webkit-linear-gradient(left, #ccc, #999);
			background: -moz-linear-gradient(left, #ccc, #999);
			background: -o-linear-gradient(left, #ccc, #999);
			background: -ms-linear-gradient(left, #ccc, #999);
			background: linear-gradient(left, #ccc, #999);
			bottom: 0;
			position: fixed;
			width: 100%;
			font-size: 12px;
}
.footer...