JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="button-container">
  <button>foo</button>
  <button>bar</button>
</div>

CSS

:root {
  --half-unit: 4px;
}

.button-container {
  background: lightcoral;
  display: flex;
  flex-direction: row;
  padding: var(--half-unit);
}

button {
  background: midnightblue;
  outline: none;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  color: white;
  margin: var(--half-unit);
}
button:hover {
  background: steelblue;
}
button:active {
  background: dodgerblue;
}