JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toolbar"><div class="widget-toolbar">
        <ul class="items">
            
        <li class="toolbar-button item">
        Record
    </li><li class="toolbar-button item">
        Load
    </li><li class="toolbar-button item">
        Save
    </li><li class="toolbar-button item">
        Clear
    </li><li class="toolbar-checkbox item">
        <input type="checkbox" id="1369637447465" value="true">
        <label for="1369637447465" style="-webkit-user-select: none;">Continuous check</label>
    </li></ul>
    </div></div>

CSS

.toolbar {
    border-top: 1px solid #adadad;
}
.widget-toolbar {
  height: 100%;
  width: 100%;
  border-bottom: 1px solid #adadad;
  background-color: #f8f8f8;
  color: #000000;
  text-align: left;
}
.widget-toolbar .items {
  height: calc(100% - 1px);
  display: block;
  padding: 0px 0px 4px 2px;
  list-style-type: none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}
.widget-toolbar .items .item {
  display: inline;
  margin: 0px 2px 0px 0px;
  height: 100%;
  font-size: 12px;
  position: relative;
}
.widget-toolbar .items .toolbar-button {
  margin: 3px 2px 3px 0px;
  padding: 2px 16px 2px 16px;
  border-radius: 6px;
  height: 16px;
  background-color: #ebebeb;
  border-top: 1px solid #c5c5c5;
  border-left: 1px solid #c5c5c5;
  border-right: 1px solid #797979;
  border-bottom: 1px solid #797979;
  color: #666666;
  cursor: pointer;
  -webkit-user-select: none;
}
.widget-toolbar .items .toolbar-button:active {
  top: 1px;
}
.widget-toolbar .items .toolbar-text {
  -webkit-user-select: none;
}