JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tk-toolbar">
  <button class="tk-button-overrides" type="button">
        <span>one button</span>
  </button>
  <div class="foo">
    <div class="bar">
    <button type="button">
        <span>another button</span>
    </button>
    <button type="button">
        <span>third button</span>
    </button>
    </div>
  </div>
</div>

CSS

.tk-toolbar {
      position: absolute;
      width: 100%;
      height: 50px;
      background-color: #f2f2f2;
      border-bottom: 1px solid #efefef;
    }
    .tk-toolbar div {
      display: inline-block;
      color: black;
    }
    .tk-toolbar button[type=button] {
      border: none;
      border-radius: 2px;
      height: 40px;
      padding: 0px;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 5px;
      margin-right: 5px;
      background-color: #fff2f2;
      padding-right: 10px;
      padding-left: 10px;
    }
    .tk-toolbar button:hover {
      background-color: #e1e1e1;
    }
    .tk-toolbar button:focus {
      outline: 0;
    }
    /* .tk-toolbar .tk-button-overrides */
    /* .tk-toolbar button[type=button] .tk-button-overrides */
    .tk-button-overrides  {
        padding-right: 100px;
        background-color: red;
    }