JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <nav>
        <img id="logo" src="images/logo_tekst.png" />
        <img id="arrow" src="images/remove-arrow-hi.png" />
        <ul id="links">
            <li> <a href="index_pro.html">Pro</a>

            </li>
            <li> <a href="index.html">Recreative</a>

            </li>
        </ul>
    </nav>
</div>

CSS

nav {
    position: relative;
}
#logo {
    float: left;
}
#links {
    float: right;
}
#links > li {
    float: left;
    margin-left: 10px;
}
#arrow {
    position: absolute;
    left: 50%;
    width: 40px;
    margin-left: -20px; /* halve the width of the image */
}