JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue-3.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="app">
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

Vue

window.addEventListener('DOMContentLoaded', () => {
  const app = Vue.createApp({});
  app.use(window['bootstrap-vue-3'].BootstrapVue3);
  app.mount(document.querySelector("#app"));
});