JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>Test</title>
            <link rel="stylesheet" type="text/css" href="costume.css">
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <!-- jQuery library -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <!-- Latest compiled JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <!-- Connect stylesheet -->
            <link rel="stylesheet" href="costume.scss">
      </head>
      <body>
            <div class="topnav" id="myTopnav" align="left">
                  <a href=""><p>Home</p></a>
                  <a href=""><p>Portfolio</p></a>
                  <a href=""><p>About</p></a>
                  <a href=""><p>Impressum</p></a>
                  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </div>
            <div class="banner topnav"></div>
            <div id="wrapper"></div>

      <script>
            $(function(){
            $(window).scroll(function() {
                  if($(window).scrollTop() >= 100) {
                  $('div#myTopnav').addClass('scrolled');
            } else {
                  $('div#myTopnav ').removeClass('scrolled');
                        }
                  });
            });

            $(function(){
            $(window).scroll(function() {
                  if($(window).scrollTop() >= 100) {
                  $('a').addClass('scrolled2');
            } else {
                  $('a').removeClass('scrolled2');
                        }
                  });
            });


            function myFunction() {
                var x = document.getElementById("myTopnav");
                if...

SCSS

body {
      margin: 0;
      padding: 0;
      height: 2000px;
}

.topnav{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      min-height: 100px;
      transition: 0.35s all ease;
      z-index: 1000;
      overflow: hidden;
}

.topnav a {
      display: inline-block;
      margin: 20px 50px;;
      list-style: none;
      text-align: right;
      text-decoration: none;
      font-size: 17px;
      transition: 0.35s all ease;
}

a {
      text-decoration: none;
      color: black;
}
a:hover {
      text-decoration: none;
}


.topnav a:hover {
      text-decoration: none;
      color: white;
}

.topnav .icon {
      display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
      float: right;
      display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
      position: fixed;
      z-index: 1001;
 }
  .topnav.responsive .icon {
      position: fixed;
      right: 0;
      top: 0;
  }

  .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      z-index: 1001;
  }
  .topnav.responsive a:hover {
      padding-left: 10px;
      color: white;
 }
}

.banner {
      background: url('https://images.unsplash.com/photo-1431492299426-2ea1ce429cc0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=135705633ad6367a0565fceae4a57372');
      background-position: center;
      background-size: cover;
      width: 100%;
      min-height: 100vh;
      z-index: 10;
      position: absolute;
}

.scrolled {
      min-height: 10px;
      color: inherit;
      background: black;
      transition: 0.35s all ease-in-out;
      opacity: 0.85;
      color: white;

}

.scrolled2 {
      color: white;
      opacity: 0.95;

      .topnav a:hover {
            background-color: red;
      }
}