JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="icons">
  <button>ic15</button>
  <button>ic14</button>
  <button>ic13</button>
  <button>ic12</button>
  <button>ic11</button>
  <button>ic10</button>
  <button>ic9</button>
  <button>ic8</button>
  <button>ic7</button>
  <button>ic6</button>
  <button>ic5</button>
  <button>ic4</button>
  <button>ic3</button>
  <button>ic2</button>
  <button>ic1</button>
  
  <button class="plus">+</button>
</div>

CSS

.icons {
  overflow: hidden;
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
}

button {
  height: 40px;
  width: 70px;
  &:nth-last-child(2) {
    position: relative;
    z-index: 1;
  }
}

.plus {
  position: absolute;
  right: 0;
  top: 0;
}