JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.js"></script>
<nav class="navbar navbar-light navbar-expand-md fixed-top">
  <a class="navbar-brand d-md-none mx-auto" href="index.html">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks" aria-controls="navbarLinks" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center" id="navbarLinks">
    <ul class="navbar-nav text-center">
      <li class="nav-item"><a href="#header" class="nav-link smooth-scroll"><span>Item 1</span></a></li>
      <li class="nav-item"><a href="#section1" class="nav-link smooth-scroll"><span>Item 2</span></a></li>
      <li class="nav-item"><a href="#section2" class="nav-link smooth-scroll"><span>Item 3</span></a></li>
      <li class="nav-item"><a href="#section3" class="nav-link smooth-scroll"><span>Item 4</span></a></li>
    </ul>
  </div>
</nav>
<section id="header">
  <img id="header-bg" src="https://images.unsplash.com/photo-1529323040680-2de9cb873be1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d5672f044ffc9ee7b862664e12bc270c&auto=format&fit=crop&w=1268&q=80">
  <h2>HEADER</h2>
</section>
<div id="main">
  <section id="section1" class="container-fluid">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu diam sollicitudin, egestas sem non, fermentum ligula. Vivamus aliquet, arcu vel lobortis ornare, magna justo auctor ante, consectetur egestas lectus velit et tortor. Curabitur lacinia leo sit amet faucibus feugiat. Cras non turpis quis ex commodo ultrices. Nullam at pretium...

CSS

html, body {height: 100%; width: 100%;}
#header {height: 100vh; color: maroon; display: flex; justify-content: center; align-items: center;}
#header-bg {height: 100vh; width: 100%; position: fixed; z-index: -1;}
#section1 {padding-top: 90px;height: 100vh;color: #fff; background-color: lime; position: relative;}
#section2 {padding-top: 90px;height: 100vh;color: #fff; background-color: coral; position: relative;}
#section3 {padding-top: 90px;height: 100vh;color: #fff; background-color: teal; position: relative;}
#footer {position: relative; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: salmon}
#footer .row {display:flex; align-items:center; justify-content: space-around;}
#footer-particles {position: absolute; height: 100%; width: 100%; background-color: salmon; z-index: -1;}

JavaScript

$(function(){
      particlesJS("footer-particles", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":4,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var update; update = function() {  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { } 				requestAnimationFrame(update); }; 
 	requestAnimationFrame(update);	
});