JSFiddle - React, Tailwind, and code Playground

by Mikołaj Szczepański

HTML

<div class="menu-panel_form">
  <ul>
    <li><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}">Mój profil</a></li>
    <li><a href="private.php">Komunikator<span class="badge">0</span></a></li>
    <li><a href="usercp.php?action=profile">Edytuj profil</a></li>
    <li><a href="usercp.php?action=avatar">Edytuj avatar</a></li>
    <li><a href="usercp.php?action=editsig">Edytuj sygnature</a></li>
  </ul>
</div>

CSS

.menu-panel_form {
  padding: 4px 0;
  background: #ccccff;
}

.menu-panel_form ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  marign: 0;
  padding: 0;
}

.menu-panel_form a {
  position: relative;
  color: white;
  text-decoration: none;
}

.menu-panel_form .badge {
  position: absolute;
  top: -3px;
  right: -8px;
  padding: 2px;
  font-size: 10px;
  color: white;
  border-radius: 55px;
  background: black;
}