JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vue">
  <textarea v-model="source"></textarea>
  <component :is="{template:source}"></component>
</div>

CSS

textarea {
  width:100%;
  height:200px;
}
.green_box {
  border: 2px solid green;
}

Vue

Vue.component('hello', {
	template:'<span>Hello</span>'
})
Vue.component('world', {
	props:['size'],
	template:`<span :style="{fontSize:size + 'px'}">🌍</span>`
})
Vue.component('green_box', {
  template: `
<div class="green_box">
<slot />
</div>`
});
new Vue({
	el:'#vue',
  data(){
  	return {
    	source:`
<div>
  <hello/><world size="30"/>
</div>`
    }
  }
})