JSFiddle - React, Tailwind, and code Playground

HTML

<section class="filters">
      <ul>
        <li>Color:
          <ul>
            <li style="order: 4;">Red (4)</li>
            <li style="order: 4;">Blue (4)</li>
            <li style="order: 0;">White (0)</li>
            <li style="order: 2;">Gold (2)</li>
            <li style="order: 1;">Purple (1)</li>
            <li style="order: 2;">Pink (2) </li>
            <li style="order: 2;">Silver (2)</li>
            <li style="order: 0;">Black (0)</li>
            <li style="order: 0;">Brown (0)</li>
            <li style="order: 1;">Yellow (1)</li>
          </ul>
        </li>
      </ul>
    </section>

CSS

.filters ul li ul {
      display: flex;
      flex-direction: column-reverse;
    }