JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<html lang="pt-br">
<head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="EPnyruRJE9nDLbMfsBSL9EkMeHEK59YWJan5fQMs">    

    
    <title>Despachante Aduaneiro Online - Parametriza</title>
</head>
    <body data-spy="scroll" data-target="#navbar">
      
        <!-- header topo menu -->
        <header class="headerinicio" id="headerinicio">
            
                <div class="logotopo" id="logotopo">
                    <figure>
                        <img src="..includes/img/logo_parametriza.png" >
                    </figure>
                </div>
                <div class="divmenu" id="divmenu">                    
                        <div class="menutopo"><a href="#home"><strong>HOME</strong></a></div>
                        <div class="menutopo"><a href="#servicos"><strong>SERVIÇOS</strong></a></div>
                        <div class="menutopo"><a href="#forwho"><strong>PARA QUEM</strong></a></div>
                        <div class="menutopo"><a href="#contato"><strong>CONTATO</strong></a></div>                           
                </div>
            
        </header>
        <!-- end header topo menu -->
        <main></main>
        <!-- div home -->
        <section class="home" id="home">
            <div class="homecontent" id="homecontent">
                <h1>AGORA VOCÊ PODE <em>IMPORTAR E EXPORTAR DE MANEIRA FÁCIL  E ECONÔMICA!</em></h1>
                </br></br>
                <p>PROCESSOS INTUITIVOS E AUTOMATIZADOS</p>
                </br>
                <p><em>HABILITAMOS SUA...

CSS

body {
    font-family: 'Open Sans';
    font-size: 10pt;
    position: relative;
}

#tela {
    
    padding: 10px;
    margin: 10px;
}

.info_titulo {
    line-height: 12px;
    margin-bottom: 3px;
}

#logo {
    height: 50px;
}
p {
    font-family: 'Open Sans';
    font-size: 15px;
}
span {
    font-family: 'Open Sans';
    font-size: 25px;
}
.headerinicio {
    width: 100%;    
    position: fixed;
    background-color: #4BA369;
    display: flex;
    height: 100px;
    color: #000;
    z-index: 100;
    top: 0;
    transition: left 0.5s linear;
}
#logotopo {
    width: 50%;
}
.divmenu {
    font-family: 'Open Sans';
    font-size: 16px;
    width: 50%;
    padding: 10px;
    margin: 10px;
    display: flex;
    flex: 1;
}
.menutopo {
    padding: 20px;
}
.menutopo a {
    color: #6c757d;
    display: inline;
}
.homecontent {
    text-align: center;
    padding: 30px;
    padding-top: 100px;
}
.home {
    height: 600px;
    background-color: #B9D9FF;
}
.divservicos {
    display: flex;
}
.divservicos div {
    flex: 1;
    padding: 10px;
    border: 2px solid black;
}
.forwho {
    height: 600px;
    background-color: #007bff;
}
.contato {
    height: 600px;
    margin-top: 100px;
    padding-top: 30px;
    margin-left: 20%;
}
.radar,
.invoice,
.ncm,
.forwhocontent {
    text-align: center;
    padding-top: 130px;
    flex-direction: column;
    display: flex;
    border: none;
}
.tituloservicos {
    border: none;
}
.contentservicos {
    border: none;
}
.buttonservicos {
    margin-bottom: 20px;
}
footer {
    width: 100%;
    height: 50px;
    background-color: #4BA369;
    margin-top: 30px;
}

JavaScript

$(document).ready(function() {
    $('divmenu a').click(function(e){
        e.preventDefault();
        alert("funcinou até aqui");
        return false;
   
    var id = $(this).attr('href'), 
        targetOffset = $(id).offset().top, 
        menuHeight = $('.headerinicio').innerHeight();

$("html, body").animate({
    scrollTop: targetOffset - menuHeight
    }, 500);

}); 
});