JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <modal>
    <template slot="header">Modal Header</template>
    <template slot="body">Modal Body</template>
    <template slot="footer">Modal Footer</template>
  </modal>
</div>

JavaScript

Vue.component('modal', {
	template: `
  	<div class="modal">
      <div class="modal-content">
          <h2 class="modal-header">
              <slot name="header"></slot>
          </h2>
          <div class="modal-body">
              <slot name="body"></slot>
          </div>
          <div class="modal-footer">
              <slot name="footer"></slot>
          </div>
      </div>
  </div>
  `
})

new Vue({
	el: '#app'
})