JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <tr>
            <td>
                <a href="https://softuni.bg" target="_blank">
                    <img src="http://s30.postimg.org/u67i1obpd/Soft_Uni_Logo.png" alt="Soft Uni Logo" />
                </a>
            </td>
            <td>
                <table class="inner-table">
                    <tr>
                        <td>
                            <a href="#" id="notifications">
                                <span class="notifications-counter">0</span>
                                <span class="notifications"></span>
                            </a>
                            <a href="https://softuni.bg/users/profile/show" target="_blank" class="user">
                                User
                                <span class="drop-down-arrow"></span>
                            </a>

                            <form>
                                <input type="text" value="" placeholder="Search..." />
                                <button>
                                    <img src="http://s30.postimg.org/4w333q98d/Search.png" alt="Search" />
                                </button>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul class="main-nav">
                                <li>
                                    <a href="https://softuni.bg/news" target="_blank">
                                        News
                                    </a>
                                </li>
                                <li>
                                    About the university
                                    <span class="drop-down-arrow"></span>
                                    <ul class="drop-down">
                                        <li>
                                            <a href="https://softuni.bg/about" target="_blank">
                             ...

CSS

/*Some style reseters first*/
body, ul, li, a, img, table, td form, input, button {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

body {
    font-family: 'PT Sans', Tahoma,sans-serif;
    font-size: 14px;
    font-weight: bold;
}

table {
    padding: 5px 10px 0;
    background-color: #234465;
}

/*input field & search button*/
form {
    display: inline-block;
    vertical-align: middle;
}

form input[type='text'] {
    float: left;
    padding: 0px 11px;
    height: 31px;
    width: 200px;
    font-size: 1.1em;
    color: #367CAE;
    border: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

form button {
    float: left;
    height: 31px;
    width: 35px;
    border: none;
    border-left: 1px solid #D5D5D5;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #fff;
}

.inner-table td:first-child {
    text-align: right;
}

/*Notifications*/
#notifications {
    display: inline-block;
    padding: 10px;
}

span.notifications-counter {
    color: #fff;
    vertical-align: middle;
}

span.notifications {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('http://s30.postimg.org/prufc3br1/Soft_Uni_Bell.png') no-repeat center;
    vertical-align: middle;
}

.drop-down-arrow {
    display: inline-block;
    width: 10px;
    height: 7px;
    background: url('http://s17.postimg.org/ppljadowr/Down_Arrow.png') no-repeat center;
    vertical-align: middle;
}

/*User navigation*/
.user {
    display: inline-block;
    padding: 10px 5px;
}

/*Main navigation*/
.main-nav > li {
    float: left;
    display: inline-block;
    padding: 10px 5px;
    position: relative;
}

.main-nav > li, .main-nav > li a, .user {
    color: #fff;
    text-transform: uppercase;
}

.drop-down {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 3px;
    width: 350px;
    background-color: #234465;
    border: 1px solid...