Semantic UI CDN

<script src="https://cdn.semantic-ui.com/load" authoring></script>

<script type="module">
  import { defineComponent } from '@semantic-ui/component';

  defineComponent({
    tagName: 'my-counter',
    template: 'Count: {count}',
    defaultState: { count: 0 },
    onCreated({ state }) {
      setInterval(() => state.count.increment(), 1000);
    },
  });
</script>

<my-counter></my-counter>

<script src="https://cdn.semantic-ui.com/load" authoring tailwind></script>

<script type="module">
  import { defineComponent } from '@semantic-ui/component';
  import { TailwindPlugin } from '@semantic-ui/tailwind';

  let definition = {
    tagName: 'my-card',
    template: '<div class="p-4 rounded-lg shadow-md">{>slot}</div>',
  };
  definition = await TailwindPlugin(definition);
  defineComponent(definition);
</script>

<my-card>Hello</my-card>

<script src="https://cdn.semantic-ui.com/load" reactivity></script>
<script type="module">
  import { Signal } from '@semantic-ui/reactivity';

  const items = new Signal(['a', 'b']);
  const count = items.derive(arr => arr.length);

  items.push('c');       // no .get()/.set() — just .push()
  count.get();          // 3 — auto-updated
</script>

<script src="https://cdn.semantic-ui.com/load" query></script>
<script type="module">
  import { $, $$ } from '@semantic-ui/query';

  $('ui-dropdown .item').length;    // 0 — blocked by Shadow DOM
  $$('ui-dropdown .item').length;   // 5 — pierces through

  await $('ui-modal').onNext('hide'); // promise-based events
</script>

<script src="https://cdn.semantic-ui.com/load" utils></script>
<script type="module">
  import { each, clone, weightedObjectSearch } from '@semantic-ui/utils';

  each(new Map([['a', 1]]), (val, key) => {});  // handles Array, Object, Map, Set, iterables
  clone(obj, { preserveDOM: true }); // handles DOM, Map, Set, Date, classes
  weightedObjectSearch('sema', items, { fields: { name: 3, tags: 1 } });
</script>