JSFiddle - React, Tailwind, and code Playground

by Shishir Max

HTML

<script src="https://fonts.googleapis.com/css?family=Lobster"></script>
<nav class="fixed-nav-bar" id="topnav">
  <ul>
    <p style="font-family:Lobster;font-size:30px;text">Stark</p>
    <li><a href="top">About</li>
        <li><a href="Portfolio">Portfolio</li>
        <li><a href="Contact">Contact</li>
     </ul>
    </nav>

    <div id="silver-background">
     <p>This is a column for personal background</p>
    </div>  
  
    <div class="bottom-bar">
     <p>stark copyright 2016. All Rights Reserved.</p>
    </div>

CSS

//body{background-color:#0BC;}
 .fixed-nav-bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 9999;
   width: 100%;
   height: auto;
   text-align: center;
   background-color: #FFF;
 }
 /*display the text on the same line*/
 
 #topnav li {
   display: inline;
   list-style-type: none;
   padding: 20px
 }
 /*removes underline format*/
 
 #topnav a {
   text-decoration: none;
   color: #00F;
   padding: 5px;
 }
 /*set hover effect*/
 
 #topnav a:hover {
   background-color: blue;
   color: #FFF;
 }
 /*set background of about-box*/
 
 #silver-background {
   background-color: silver;
 }
 /*create a bottom bar*/
 
 .bottom-bar {
   width: fluid;
   padding: 20px;
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
   height: 50px;
   text-align: center;
   background-color: #FFF;
 }