JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<header>
  <h1>Flexbox</h1>
</header>
<main>
  <div class="flex-grid">
    <div>navy</div>
    <div>blue</div>
    <div>aqua</div>
    <div>teal</div>
    <div>olive</div>
    <div>green</div>
    <div>lime</div>
    <div>yellow</div>
    <div>orange</div>
    <div>red</div>
    <div>maroon</div>
    <div>fuchsia</div>
    <div>purple</div>
    <div>black</div>
    <div>grey</div>
    <div>silver</div>
  </div>
</main>

SCSS

body {
  margin: 0;
  padding: 0;
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.flex-grid > * {
  height: 80px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3333%;
  flex-basis: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const children = document.querySelectorAll('.flex-grid > div');

children.forEach((item) => {
  item.style = `background: ${item.innerHTML}; color: white`;
});