JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<section class="tabs-component">
  <!-- {% for tab in tabs %} -->
  <div
    v-for="tab in tabs"
    :key="tab.name"
    class="tabs-component__tab-item"
    :class="{active: tab.isActive}"
    role="button"
    tabindex="0"
  >
    {{tab.name}}
  </div>
  <!-- {% endfor %} -->
  <div>{{tabs}}</div>
  <div>{{count}}</div>
  <button @click="inc">inc</button>
</section>
<hr class="tabs-component__hr" />

<script src="https://unpkg.com/petite-vue"></script>
<script>
  console.log(`PetiteVue`, PetiteVue);
  const vm = PetiteVue.createApp({
    //$delimiters: ["${", "}"],
    count: 1,
    tabs: [
      { name: "General", isActive: true },
      { name: "Students", isActive: false },
      { name: "Teachers", isActive: false },
    ],
    inc() {
      this.count++;
    },
  }).mount();

  console.log(`vm`, vm);
</script>