JSFiddle - React, Tailwind, and code Playground

by Michael Wood

HTML

<ul class="menu">
  <li class="menu-item"><a href="#">Item</a></li>
  <li class="menu-item"><a href="#">Item</a></li>
  <li class="menu-item"><a href="#">Item</a></li>
  <li class="menu-item"><a href="#">Item</a></li>
  <li class="menu-item big-button"><a href="#">My Big Button</a></li>
  <li class="menu-item small-button1"><a href="#">Small Button</a></li>
  <li class="menu-item small-button2"><a href="#">Small Button</a></li>
</ul>

CSS

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  height: 6em;
}
.menu .menu-item {
  padding-right: 15px;
}
.menu .menu-item a {
  display: flex;
  align-items: center;
}
.big-button a {
  background-color: coral;
  padding: 1em;
  width: 5em;
  text-align: center;
  min-height: 4em;
}
.small-button1 a,
.small-button2 a {
  background-color: coral;
  padding: .5em 1em;
  width: 7em;
  text-align: center;
}