JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <textarea v-model="css"></textarea>
  <textarea v-model="html"></textarea>
  <preview :css="css" :html="html"></preview>
</div>

JavaScript

Vue.component('preview', {
  props: ['css', 'html'],
  template: '<div></div>',
  data() {
    return {
      iframe: null,
      div: null,
      style: null,
    }
  },
  mounted() {
    this.iframe = document.createElement('iframe');
    console.log(this.$el, this.iframe);
    this.$el.appendChild(this.iframe);
    this.style = document.createElement('style');
    this.iframe.contentWindow.document.head.appendChild(this.style);
    this.$watch('css', (css) => this.style.textContent = css, {
      immediate: true
    });
    this.$watch('html', (html) => this.iframe.contentWindow.document.body.innerHTML = html, {
      immediate: true
    });
  },
});

new Vue({
  el: '#app',
  data: {
    css: '',
    html: '',
  },
});