JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
	<my-component>
		<h1 slot="header">Here might be a page title</h1>

		<p>A paragraph for the main content.</p>
		<p>And another one.</p>

		<p slot="footer">Here's some contact info</p>
	</my-component>
</div>

JavaScript

Vue.component('my-component', {
  template:`
    <div class="container">
			<header>
				<slot name="header"></slot>
			</header>
			<main>
				<slot></slot>
			</main>
			<footer>
				<slot name="footer"></slot>
			</footer>
		</div>`
})

const vm = new Vue({
  el: '#app'
})