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="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div id="silver-background">
  This is a column for personal background
</div>

<div class="bottom-bar">
  <p>stark copyright 2016. All Rights Reserved.</p>
</div>

CSS

body {
   background-color: #0BC;
 } 
 
 .fixed-nav-bar {
   //position: absolute;
   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: #0BC;
 }
 /*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;
   color: blue
 }

JavaScript

document.getElementById("silver-background").style.backgroundColor = "silver";