JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<div class="bucket-container">
  <div class="bucket">
    <h1>
      Numbering Schema #1
    </h1>
    <ul>
      <li>Service Desk A</li>
      <li>Service Desk C</li>
    </ul>
  </div>
  <div class="bucket">
    <h1>
      Numbering Schema #2
    </h1>
    <ul>
      <li>Service Desk B</li>
    </ul>
  </div>
  <div class="bucket">
    <h1>
      Numbering Schema #3
    </h1>
    <ul>
      <li>Service Desk D</li>
    </ul>
  </div>
  <div class="bucket">
    <h1>
      Numbering Schema #4
    </h1>
    <ul>
      <li>Service Desk E</li>
      <li>Service Desk F</li>
    </ul>
  </div>
  <div class="bucket">
    <h1>
      Numbering Schema #5
    </h1>
    <ul>
    </ul>
  </div>
</div>

CSS

.bucket-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.bucket {
  width: 250px;
  min-height: 250px;
  margin: 2em;  /* Magic! */
  border: 1px solid #4b4b4b;
}

.bucket h1 {
  font-size: 1.25em;
  margin: 0 1em 1em;
}

.bucket ul {
  margin: 0;
  padding: 0 1em;
  list-style: none;
}