JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="hey"></iframe>
<script>
let code = 'data:text/html,' + encodeURIComponent(`
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></` + `script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></` + `script>
<div id="app">
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>
<script>
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

const app = Vue.createApp({})
app.use(router)

app.mount('#app')
</` + `script>
`);
console.log(code)
let iframe = document.getElementById('hey')
iframe.src = code
</script>