JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="btn-group dropup">
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
      <li><div>Add new row of data</div></li>
    <li><div>Add row(s) using saved default</div></li>
    <li><div>Replace with saved defaults</div></li>
  </ul>
</div>




<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Set Defaults</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Set as Defaults</a></li>
    <li><a href="#">Unset as Defaults</a></li>
  </ul>
</div>

CSS

body {
  margin: 150px;
  font-family:'century gothic';
}
.dropdown-menu>li>div {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu>li>div:hover, .dropdown-menu>li>div:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}