JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Spinners</title>

    <style>
      * {
        box-sizing: border-box;
      }

      #grid {
        display: grid;
        grid-template-columns: max-content auto;
        place-items: flex-start;
        gap: 20px;
      }

      #grid > * {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      select,
      button,
      input,
      textarea {
        padding: 5px;
        border: solid 1px gray;
        border-radius: 5px;
      }

      #preview,
      #frames {
        display: inline-block;
        max-width: 100%;
        overflow: auto;
        padding: 5px;
        white-space: pre;
        box-shadow: 0 0 5px #0004;
      }

      #frames {
        height: 10lh;
      }

      :not(html) ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background-color: lightgray;
      }

      :not(html) ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background-color: gray;
      }
    </style>
  </head>

  <body>
    <div id="grid">
      <label>Design:</label>
      <div>
        <select id="design" oninput="onDesignChange()"></select>
        <button onclick="prevNext(-1)">Prev</button>
        <button onclick="prevNext(1)">Next</button>
      </div>

      <label>Interval:</label>
      <input
        id="interval"
        type="number"
        min="5"
        step="5"
        max="10000"
        oninput="onIntervalChange()"
      />

      <label>Font:</label>
      <input id="font" value="Courier New" oninput="onStyleChange()" />

      <label>Dark:</label>
      <input id="dark" type="checkbox" checked oninput="onStyleChange()" />

      <label>Preview:</label>
      <div><span id="preview"></span></div>

      <label>Frames:</label>
      <textarea id="frames" oninput="onFramesChange()"></textarea>
    </div>

    <script>
      // load spinners
      const url =
       ...