JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<ul>
  <li><a class=active id="home-btn" href="">Home</a></li>
  <li><a id="about-btn" href="#">About me</a></li>
  <li><a href="./data/resume.pdf">Resume</a></li>
  <li><a id="contact-btn" href="">Contact</a></li>
</ul>

<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
  <p>Hi, I'm Austin. Check out my site.</p>
</div>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 20%;
  height: 100%
  background-color: #f1f1f1;
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

li a {
  text-align: center;
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

.active {
    background-color: #6b8d2f;
    color: black;
}

JavaScript

$( "#about-btn" ).click(function() {
    $( "#home" ).fadeOut("slow");
   // alert("clicked");
  });