JSFiddle - React, Tailwind, and code Playground

by otherDewi

HTML

<body>
    <header class="clearfix">
            <h1 id="heading">Main Heading</h1>
            <h2>Sub Heading</h2>
            <p>Tagline - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, corporis.</p>

        <div class="clearfix main-nav">
            <ul class="clearfix">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#video">Video</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
	 	</div>     
    </header>
</body>
</html>

CSS

header{
	text-align:right;
}

header p{
	float:right;
}

.main-nav{
	width: 100%;
	background-color: #d3eafc;
}

.main-nav ul{
	clear:both;
	list-style:none;
	padding:0;
	margin:10px 0;
}

.main-nav ul li{
	float:left;
	list-style:none;
	width:150px;
	border-right: 1px solid #999;
}

.main-nav a:link,
.main-nav a:visited{
	display:block;
	line-height:30px;
	text-align:center;
	color:#fff;
	text-decoration:none;
}