JSFiddle - React, Tailwind, and code Playground

by mledbetter

HTML

<div class='container'>
  <div class='item'>
  <button text='Test button'>

  </button>
  </div>
  <div class='item'>
  2
  </div>
  <div class='item'>
  3
  </div><div class='item'>
  4
  </div>
  <div class='item'>
  5
  </div>
  <div class='item'>
  6
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row-reverse;
  border: solid 2px Orange;
}
.item {
  border: solid 2px Gray;
  border-top: none;
  color: #FFF;
  flex-grow: 1;
  flex-shrink: 1;
}
.item:nth-child(even) {
  background-color: #2ecc71;
}
.item:nth-child(odd) {
  background-color: #9b59b6;
}