JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header id="tophead">
		<div id="hwrapper">
			<div id="logonsearch">
				<a href="#" class="h1" id="sitename">Well-Designed Blog</a>
				<p id="slogan">Created by Terry</p>
				<section id="search">
					<form action="#">
						<input type="search" name="search" id="site_search" placeholder="Enter keywords">
						<input type="submit" class="button" id="submit_search">
					</form>
				</section>
			</div>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Portfolio</a>
						<ul>
							<li><a href="#">Wordpress Theme</a>
								<ul>
									<li><a href="#">Green</a></li>
									<li><a href="#">Blue</a></li>
									<li><a href="#">Red</a></li>
								</ul>
							</li>
							<li><a href="#">Blogger Theme</a>
								<ul>
									<li><a href="#">Green</a></li>
									<li><a href="#">Blue</a></li>
									<li><a href="#">Red</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</nav>
		</div>
	</header>
            <p>The #blogname doesn't have .5em margin-top, though I have declared it on my CSS</p>
</body>

CSS

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

a {
	text-decoration: none;
	color: inherit;
}

h1, .h1 {
	font-size: 150%;
}

h2, .h2 {
	font-size: 120%;
}

h3, .h3 {
	font-size: 110%;
}
h4, .h4 {
	font-size: 107%;
}
#tophead {
	background-color: #000000;
}

#tophead a, #tophead p {
	color: #FFFFFF;
}

#hwrapper {
	margin: 0 auto;
	width: 80%;
}

#logonsearch:after {
	content: '';
	display: block;
	clear: both;
  margin-top: 1px;
}
#search {
	float: right;
	margin-bottom: 1em;
}

#tophead nav {
	background-color: #000000;
	background-image: -webkit-linear-gradient(top, #000000 60%, #333333);
	border-top: 1px solid #666666;
	clear: both;
}

#tophead nav ul {
	list-style: none;
	display: inline-table;
}

#tophead nav ul:after {
	content: '';
	display: block;
	clear: both;
}

#tophead nav ul li {
	float: left;
	position: relative;
}

#tophead nav ul li a {
	display: block;
	margin: 1em;
	padding: 0 .5em;
}

#tophead nav ul ul {
	display: none;
}

#tophead nav ul li:hover > ul {
	display: block;
}

#tophead nav ul ul {
	position: absolute;
	top: 100%;
	background-color: #333333;
	background-image: -webkit-linear-gradient(top, #333333, #000000);
	box-shadow: 2px 2px 3px rgba(0,0,0,.5);
}

#tophead nav ul ul li...