JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="links">
    <span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>
  </div>
  <div class="profile"></div>
</div>

CSS

.topmenu {
    background: #6b00f3 linear-gradient(180deg, #7f0000, #6b0103) repeat scroll 0 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 48px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
 }
.topmenu .container {
    height: 100%;
}
.topmenu .container .links {
    height: 100%;
}
.topmenu .container .links .link {
    box-sizing: border-box;
    height: 100%;
    text-decoration: none;
    padding: 0 10px;
    color: #fff;
}
.topmenu .container .links .link:not(:last-child) {
    border: 1px solid #630000;
}