JSFiddle - React, Tailwind, and code Playground

by yura747

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.24/bootstrap-native.min.js"></script>
<script src="bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Quizzes</title>
    <link rel="icon" type="image/png" href="favicon/favicon.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#ffffff">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset-bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>



    <div class="content-wrapper">
      <div class="container-fluid" id="info">
        <div class="menu">
          <ul>
            <li>
              <a href="#info">
                <h6>Info</h6>
                <p>1</p>
              </a>
            </li>
            <li>
              <a href="#quizz">
                <h6>Quiz</h6>
                <p>2</p>
              </a>
            </li>
            <li>
              <a href="#super-holiday">
                <h6>Super holiday</h6>
                <p>3</p>
              </a>
            </li>
            <li>
              <a href="#rules">
                <h6>Rules</h6>
                <p>4</p>
              </a>
     ...

CSS

@font-face {
  font-family: 'Glyphicons-halflings-regular';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot#?iefix') format('eot'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

@font-face {
  font-family: 'Toonish-webfont';
  src: url('../fonts/toonish-webfont.eot');
  src: url('../fonts/toonish-webfont.eot#?iefix') format('eot'), url('../fonts/toonish-webfont.woff') format('woff'), url('../fonts/toonish-webfont.ttf') format('truetype'), url('../fonts/toonish-webfont.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

.glyphicons {
  font-family: 'Glyphicons-halflings-regular';
}

.toonish {
  font-family: 'Toonish-webfont';
}

.h5 {
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  font-size: 18px;
}

.bottom-triangle {
  content: '';
  position: absolute;
  top: 100%;
  border: 30px solid transparent;
  border-top: 54px solid;
  left: calc(50% - 15px);
  z-index: 1;
}

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
a,
div {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-family: "Tahoma";
  font-size: 14px;
  font-weight: normal;
}

h1 {
  font-family: 'Toonish-webfont';
  font-size: 40px;
}

.button {
  text-align: center;
  margin-top: 10px;
  margin-left: 15px;
}

.button img {
  position: absolute;
  margin-top: 12px;
  margin-left: 15px;
  display: inline-block;
  width: 20px;
  height: 16px;
  z-index: 2;
}

.button a {
  display: inline-block;
  color: #fff;
  padding: 5px 30px;
  padding-left: 40px;
  text-decoration: none;
  background: linear-gradient(#8ac63f, #39b54a);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
 ...

JavaScript

function onScroll() {
  var scroll_top = $(document).scrollTop();
  $("li a").each(function() {
    var hash = $(this).attr("href");
    var target = $(hash);
    if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
      $("li").removeClass("active");
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
    }
  });
}
$(document).ready(function() {
  $(document).on("scroll", onScroll);
  $("li a").click(function(e) {
    e.preventDefault();
    $(document).off("scroll");
    $("li").removeClass("active");
    $(this).addClass("active");
    var hash = $(this).attr("href");
    var target = $(hash);
    $("html, body").animate({
      scrollTop: target.offset().top
    }, 500, function() {
      window.location.hash = hash;
      $(document).on("scroll", onScroll);
    });
  });
});