JSFiddle - React, Tailwind, and code Playground

by Pat Steve

HTML

<body class="contact">
	<header id="header">
        <div id="logo">
            <a href="../Pages/index.html"><img src="../Images/R2.png" alt="Portfolio"/></a>
        </div><!--logo-->
        <div id="header_spacer" content=''></div>
        <div id="navbar"> 
            <ul id="navbar_ul"> 
            	<li class="nav"><a href="../Pages/login.html" alt="login" >LOGIN</a></li>
                <li class="nav"><a href="../Pages/contact.html" alt="contact information" >CONTACT</a></li>
                <li class="nav"><a href="../Pages/about.html" alt="about the artist" >ABOUT</a></li>
                <li class="nav"><a href="../Pages/portfolio.html" alt="portfolio" >PORTFOLIO</a>
                	<ul id="portfolio_menu">
                    	<li><a href="../Pages/paintings.html" alt="paintings" >PAINTINGS</a></li>
                        <li><a href="../Pages/drawings.html" alt="drawings" >DRAWINGS</a></li>
                        <li><a href="../Pages/cartoons.html" alt="cartoons" >CARTOONS</a></li>
                    </ul><!--portfolio_menu-->
                </li>
            </ul><!--navbar_ul-->
       </div><!--navbar-->
	</header>
</body>

CSS

* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		}
		
	body {
		font-family: 'PT Sans', sans-serif;
		font-weight: 100;
		background-color: white;
		padding: 25px;
		}
		
	body.index {
		background-image: url(../Images/black-and-white-surfer-surfing2.jpg);
		background-repeat: no-repeat;
		background-size: 2000px;
		font-family: 'PT Sans', sans-serif;
		background-color: white;
		padding: 0px;
		}
		
	header {
		display: inline-block;
		position: fixed;
		overflow: hidden;
		width: 100%;
		padding: 25px;
		white-space: nowrap;
		text-align: justify;
		-ms-text-justify: distribute-all-lines;
		text-justify: distribute-all-lines;
		}
		
	#header_spacer {
		display: inline-block;
		height: auto;
		max-width: 950px
		min-width: 50px;
		}
		
	#logo {
		float: left;
		height: 150px;
		width: 150px;
		margin-left: 10%;
		margin-top: 10px;
		/*border: 1px solid black;*/
		}
		
	#logo img {
		height: 150px;
		width: 150px;
		opacity: 0.9;
		}
		
	.center_heading {
		text-align: center;
		}
		
	
		
	/* rules for navigation menu */
	/* ========================================== */
	
	div#navbar {
		width: 502px;
		margin-top: 60px;
		margin-right: 10%;
		overflow: hidden;
		display: inline-block;
		white-space: normal;
		text-align: center;
		}
		
	ul#navbar_ul {
		overflow: hidden;
		width: auto;
		text-align: center;
		/*border: 1px solid orange;*/
		}

	ul#navbar_ul, ul#portfolio_menu {
		list-style-type: none;
		font-size: .8em;
		}
		
	ul#navbar_ul li.nav {
		line-height: 40px;
		}
		
	ul#navbar_ul li {
		width: 125px;
		display: inline;
		float: right;
		position: relative;
		}
		
	ul#navbar_ul a {
		text-decoration: none;
		font-family: 'PT Sans', sans-serif;
		font-size: 1.475em;
		color: black;
		position: relative;
		}
		
	ul#portfolio_menu {
		display: none;
		overflow: hidden;
		}
			
	ul#navbar_ul li:hover #portfolio_menu{
		display: inline-block;
		overflow: hidden;
		text-align:...