JSFiddle - React, Tailwind, and code Playground

by Gleb Kemarsky

HTML

<div class="header" style="height: 100px; overflow: visible;">
  <div class="row">
    <div class="logo" data-margin-top="34px" data-margin-bottom="10px" data-margin-left="0px" data-margin-right="0px">
      <a class="logo-link" href="http://stackoverflow.com/">
        <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
      </a>
    </div>
    <div class="main-menu">

      <ul id="menu-mainnav-1" class="menu menu-center">
        <li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
          <a href="/link1/" aria-haspopup="true">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
        <li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
          <a href="http://stackoverflow.com/" aria-haspopup="true">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
        <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
          <a href="http://stackoverflow.com/">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
        <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
          <a href="http://stackoverflow.com/">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
          <a href="http://stackoverflow.com/">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
      </ul>

      <ul id="menu-mainnav-2" class="menu menu-right">
        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
          <a...

CSS

.header {
  height: 100px;
  overflow: visible;
  padding: 0px;
}

.row {
  position: relative;
  width: 94.44444%;
  margin: 0 auto;
  max-width: 100%;
}

.logo {
  display: inline-block;
  width: auto;
  float: left;
}

.main-menu {
  position: relative;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.menu > li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  display: list-item;
  text-align: match-parent;
  padding-right: 11px;
}
.menu > li {
  float: none;
  display: inline-block;
}

.menu > li > a {
  font-size: 11px;
  display: block;
  box-sizing: content-box;
}

.menu-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.menu-right {
  float: right;
}