JSFiddle - React, Tailwind, and code Playground

by Lars Holm Jensen

HTML

<script src="//unpkg.com/alpinejs"></script>

<div x-data="window.app()" x-init="init()">
  <button x-on:click="go()">Expand</button>
  <template x-if="list.length">
  <ul>
  <template x-for="item in list">
  <li x-text="item.name"></li>
  </template>
  </ul>
  </template>
</div>

CSS

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
li {
  display: block;
  width: 10%;
  border: 1px solid var(--gray-l);
  border-width: 0 1px 1px 0;
  box-sizing: border-box;
  padding: .25em;
}

JavaScript

window.app = function app(){
    return {
        list: [],
        init: function() {
            const token = () => Math.random().toString(36).substring(2, 10);
            for (let i = 0; i < 400; i++) {
              this.list.push({name: token(), id: i });
            }
        },
        go: function() {
            this.list.forEach(item => {
              setTimeout(() => {
                item.name = token()
              }, 10);
            })
            setTimeout(this.go, 10);            
        }
    }
}