JSFiddle - React, Tailwind, and code Playground

HTML

<div class='navigation'>
    <div id="nav">
        <ul>
            <li class='headline' id='search'>Search</li>
            <li class='headline' id='news'>News</li>
            <li class='headline' id='media'>Media</li>
            <li class='headline' id='miscellaneous'>Miscellaneous</li>
        </ul>
        <div id='content'>Hover over a headline to show its content.</div>
    </div>
</div>

CSS

html, body, form, p {
    padding: 0px;
    margin: 0px;
}
body {
    background: url('images/bg1.jpg') no-repeat center center fixed;
    background-size: 100% 100%
}
html, body {
    height: 100%;
}
a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: black;
}
p:hover {
    cursor: default;
}
#nav > ul {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#content > ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
section {
    position: relative;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    top: 40%;
    background-color: red;
    font-family:'Roboto';
}
.searchBar {
    width: 100%;
    background-color: yellow;
}
#command {
    background-color: #1A1A1A;
    width: 100%;
    height: 33px;
    /* = 12% */
    text-indent: 2%;
    color: transparent;
    /* Main color becomes invisible i.e. transparent */
    text-shadow: 0 0 grey;
    /* The transparent text gets a shadow */
    cursor: default;
    border: 3px #272727 solid;
    border-radius: 3px;
    font-size: 1em;
    font-family: inherit;
}
.submitbutton {
    position: relative;
    font-size: 14px;
    width: 50px;
    height: 20px;
    top: -30px;
    float: right;
    border: none;
    border-radius: 3px;
    background-color: #272727;
    font-family: inherit;
}
.navigation {
    background-color: cyan;
    width: 100%;
    height: 78%;
}
.headline {
    background-color: orange;
    display: inline-block;
    padding: 10px;
    cursor: default;
}
#content {
    position: relative;
    background-color: pink;
    display: inline-block;
    padding: 10px;
}
.icon {
    width: 16px;
    height: 16px;
}
.link {
    margin-left: 15px;
}
#command::selection {
    background: transparent;
    /* WebKit/Blink Browsers */
}
#command::-moz-selection {
    background: transparent;
    /* Gecko Browsers */
}

JavaScript

/* global $ */
$(function () {
    
    $('#content').hide();

    var contentSearch = '<ul class="submenu">' +
        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">DuckDuckGo</a></li>' +
        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">Google</a></li>' +
        '</ul>';

    var contentNews = '<ul>' +
        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">kekhueawd</a></li>' +
        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">eheheheheheheeh</a></li>' +
        '</ul>';

    var submenuTimeout;

    debugger;

    $(document.body)

        .on('mouseover', '#search', function () {

            var pos          = $(this).position();
            var headlineWdth = $(this).width();

            $('#content').html(contentSearch);

            var contentWdth          = $('#content').width();
            var contentWdthRemaining = contentWdth - headlineWdth;
            var posSubtract          = contentWdthRemaining / 2;

            $('#content')
                .css({
                    'left': pos.left - posSubtract
                })
                .slideDown('fast');
        })

        .on('mouseover', '#news', function () {
            
            var pos          = $(this).position();
            var headlineWdth = $(this).width();
            
            $('#content').html(contentNews);

            var contentWdth          = $('#content').width();
            var contentWdthRemaining = contentWdth - headlineWdth;
            var posSubtract          = contentWdthRemaining / 2;

            $('#content')
                .css({
                    'left': pos.left - posSubtract
                })
                .slideDown('fast');

        })

        .on('mouseover', '.submenu', function () {
            clearTimeout(submenuTimeout);
        });

    $('#nav').on('mouseleave',...