JSFiddle - React, Tailwind, and code Playground

by mxfiddle

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>This will be my personal webiste!</title>
    <link href="/Users/max/Desktop/Site/set.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/Users/max/Desktop/Site/navbar.js" async></script>
  </head>

  <body>
    <div class="navbar-wrapper" style="height: 80px">
      <div id="navbar">
        <a style="float: left" href="/Users/max/Desktop/Site/index.html">Hello World!</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Writing.html">Writing</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Projects.html">Projects</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/About.html">About</a>
      </div>
    </div>
    <div class="header">
      <h1>Hello, World!</h1>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit quam magna, vitae viverra magna accumsan quis. Quisque venenatis nisl eu erat viverra posuere. Cras sed risus ut tortor porttitor luctus et ac velit. Nunc aliquam commodo mauris nec luctus. Phasellus commodo rutrum diam id placerat. In pretium nec metus quis vehicula. Pellentesque euismod, purus id tempor imperdiet, justo turpis vestibulum dui, non tristique tortor est a urna. Suspendisse lobortis faucibus nisl in faucibus. Vestibulum id lacus justo. Vestibulum justo lectus, euismod sit amet tellus sed, hendrerit pellentesque tellus. Nulla semper et tellus eu gravida. Duis non leo sit amet augue sagittis convallis non id ipsum. Sed nec nisi sit amet augue facilisis ullamcorper et in sem. Suspendisse ut purus nec ligula varius dictum.

Etiam porta nunc eu urna luctus porta. In tellus felis, bibendum vel eleifend vitae, gravida suscipit metus. Nunc sed eleifend risus. In at fermentum enim. Pellentesque malesuada libero...

CSS

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 {
  margin: auto;
  padding: 0px;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 900px;
  font-family: "PMN Caecilia", sans-serif;
  text-align: justify;
  list-style: decimal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  overflow-y: scroll;
  margin: 30px;
  line-height: 1.6;
  font-size: 120%;
  max-width: 800px;
  margin-bottom: 100px;
  background-color: #FAFAFA;
  color: #000000;
}

h1 {
  font-size: 220%;
  font-family: "PMN Caecilia", sans-serif;
  margin-bottom: 30px;
  margin-top: 30px;
}

h2 {
  font-family: "PMN Caecilia", sans-serif;
  font-size: 160%;
}

p {
  font-size: 85%;
  margin-top: 30px;
  margin-bottom: 30px;
}

a {
  color: #8000FF;
  text-decoration: none;
  position: relative;
}

#navbar {
  float: left;
  height: 80px;
  width: 100%;
  max-width: 800px;
  top: 0px;
  overflow: hidden;
  background-color: #FAFAFA;
}

#navbar a {
  top: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}

#navbar a:after {
  content: "";
  position: absolute;
  left: 0%;
  right: 100%;
  bottom: -5px;
  background: #8000FF;
  height: 3px;
  transition-property: left right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#navbar a:hover:after {
  right: 0%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.header {
  width: 100%;
  top: 0px;
  margin-bottom:...

JavaScript

// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}