JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Society of Competitive Programmers</title>
        <link rel="shortcut icon" type="image/x-icon" href="./images/EditedActLogo.png" />
        <!-- Bootstrap and jQuery -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- CSS external links -->
        <link rel="stylesheet" href="css/general.css">
        <link rel="stylesheet" href="css/about.css">
        <script type="text/javascript" src="js/about.js"></script>
    </head>
    <body>
        <div id="content">
            <!-- Navbar -->
            <nav class="navbar shadow sticky-top navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="./index.html" class="d-inline-block align-top">
                    <img src="images/scpPossLogo.png" height="45" width="87.363834422657952" alt="">
                    <span>Society of Competitive Programmers</span>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span...

JavaScript

$('.headerLink').click(function(){
    let scrollID = this.id.substring(0,this.id.length-3);
    console.log(scrollID);
    $('html, body').animate({
        scrollTop: $('#' + scrollID).offset().top
    }, 500);
});