JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<header class="header">
		<div class="pushMenu" id="left">
            <a href="" title=""><p>l</p></a>
		</div>
		<div class="pushMenu" id="right">
            <a href="" title=""><p>r</p></a>
		</div>
        <div>
    		<span class="myTitle">title</span>
            <span class="myBy">(by me)</span>
        </div>
	</header>

CSS

/*********************************** BODY ***********************************/
body {font-size: 12px !important;}


/*********************************** COLORS ***********************************/
body {background-color: #F1F0F5 !important;}
header {
	background-color: #394163;
	border-bottom-color: #656B7C;
}
div.myLeft, div.myRight {background-color: #E0E0C7;}
/* nav */
.nav {background-color: #C64A3B;}
/* nav active */
.nav a.active {border-top-color: #800000;}
.nav .active i {color: #800000;}
/* nav not active */
.nav a:not(.active) {border-top-color: #A94335;}




/*********************************** HEADER ***********************************/
header {
	text-align: center !important;
	line-height: 60px;
	font-weight: bold;
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 60px;
	color: #ffffff;
}
header div.pushMenu {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 10px;
	border: 1px solid white;
}
header div.pushMenu#left {left: 10px;}
header div.pushMenu#right {right: 10px;}
header div.pushMenu a {
	width: 30px;
	height: 30px;
	display: block;
    line-height:30px;
    color:red;
}

header div.pushMenu p{
    margin:0;
    line-height:30px;
}
header span.myTitle {
	padding: 0px;
	font-size: 20px !important;
	text-transform: uppercase;
	display: inline-block;
}
header span.myBy {
	font-size: 10px !important;
	font-style: italic;
}