JSFiddle - React, Tailwind, and code Playground

by sp_true

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Header</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link
        rel="https://cdn.rawgit.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/856f1dbb8d807aabceb80b6d4f94b464df461b3e/gotham.css">
    <link rel="stylesheet" href="/include/css/style.css">
</head>

<body>
    <div class="head-menu">
        <div class="container-fluid head-menu__submain-menu submain-menu">
            <div class="row">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="col-12">
                            <div class="menu">
                                <ul role="menu">
                                    <li class="hs-menu-item hs-menu-depth-1" role="none"><a
                                            href="/industries" role="menuitem"
                                            target="__blank">Industries</a></li>
                                    <li class="hs-menu-item hs-menu-depth-1" role="none"><a
                                            href="/solutions" role="menuitem"
                                            target="__blank">Solutions</a></li>
                                    <li class="hs-menu-item hs-menu-depth-1" role="none"><a
                                            href="/platform" role="menuitem"
                                            target="__blank">Platform</a></li>
                                    <li class="hs-menu-item hs-menu-depth-1" role="none"><a
                                            href="/about" role="menuitem"
                                         ...

CSS

body {
    overflow-x: hidden;
    height: 2000px;
}

.head-menu {
    background: #fff;
    font-family: Gotham, sans-serif;
    width: 100%;
}

.head-menu .submain-menu .menu > ul,
.head-menu .main-menu .menu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.head-menu .submain-menu .menu > ul > li > a {
    color: #53607e;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.head-menu .submain-menu .menu > ul > li:hover > a,
.head-menu .main-menu .menu > ul > li:hover > a {
    color: #faae31;
    text-decoration: none;
}
.head-menu .main-menu .menu > ul > li.tooltip-default > a, 
.head-menu .main-menu .menu > ul > li.tooltip-default:hover > a {
    color: #8591a8
}
.head-menu .submain-menu .menu > ul > li {
    transition: .2s ease;
    margin-right: 44px;
    padding: 10px 0;
}

.head-menu .submain-menu .menu > ul > li:last-child {
    margin-right: 0;
}

.head-menu .submain-menu {
    border: 1px solid #dddfe5;
}

.head-menu .main-menu .main-menu__logo {
    position: relative;
    display: block;
    width: 3.625rem;
    height: 3.625rem;
}

.head-menu .main-menu .main-menu__logo .back {
    transform: rotateY(180deg);
}

.head-menu .main-menu .main-menu__logo .front,
.head-menu .main-menu .main-menu__logo .back {
    backface-visibility: hidden;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: .8s ease;
    width: 3.625rem;
    height: 3.625rem;
}

.head-menu .main-menu .main-menu__logo:hover .back {
    transform: rotateY(360deg);
}

.head-menu .main-menu .main-menu__logo:hover .front {
    transform: rotateY(180deg);
}

.head-menu .main-menu .menu-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.head-menu .main-menu .menu {
    margin-right: 5%;
}

.head-menu .main-menu .menu > ul > li {
    cursor: pointer;
    position: relative;
}

.head-menu .main-menu .menu > ul > li > a {
    display: block;
   ...

JavaScript

$(document).ready(function () {

    function MenuBorder(elem) {
        const isActive = $(elem).find('ul > li.hs-menu-depth-1').hasClass('active'),
            style = 'easeOutExpo',
            border = $('#menu-border')

        // Params
        let default_width = $(elem).find('ul > li.hs-menu-depth-1.active > a').outerWidth() - 48,
            default_top = (isActive) ? $(elem).find('ul > li.hs-menu-depth-1.active').outerHeight() : $(elem).find('ul > li.hs-menu-depth-1').outerHeight(),
            default_left = (isActive) ? Math.round($(elem).find('ul > li.hs-menu-depth-1.active').offset().left - $(elem).find('ul').offset().left + 24) : -($(elem).offset().left);

        if (isActive) {
            border.css({ width: default_width, left: default_left, top: default_top - 4 });
        } else {
            border.css({ width: default_width, left: -default_left, top: default_top - 4 });
        }

        $(elem).find('li.hs-menu-depth-1').mouseenter(function () {
            let subMenuVisible = $('.hs-menu-children-wrapper').is(':visible')


            let width = $(this).children('a').outerWidth() - 48,
                left = Math.round($(this).offset().left - $(elem).find('ul').offset().left) + 24

            border.stop(false, false).animate({ left: left, width: width }, { duration: 1200, easing: style });


            if ($(this).hasClass('tooltip-default')) {
                border.css({ background: '#8591a880'})
            }
            else {
                border.css({ background: '' });
            }
        });
        $(elem).find('ul').mouseleave(function () {
            let default_left = (isActive) ? Math.round($(elem).find('ul > li.hs-menu-depth-1.active').offset().left - $(elem).find('ul').offset().left + 24) : -($(elem).offset().left * 2);

            if (isActive) {
                border.stop(false, true).animate({ left: default_left, width: default_width }, { duration: 2000, easing: style }).css({ background: '' }); // Left...