JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<!-- template(#story-template) -->
<template id="story-template">
	<h1>{{story.plot}} said {{story.writer}}</h1>
</template>


<div id="container">
  <story v-bind:story="{plot: 'my horse is amazing!', writer: 'mr. weeble'}"></story>
  <story v-bind:story="{plot: 'narwhals invented shish kebab.', writer: 'mr. weeble'}"></story>
  <story v-bind:story="{plot: 'the dark side of the force is stronger.', writer: 'darth vader'}"></story>
</div>
<!-- // #container -->

JavaScript

Vue.component('story', {
	props: ['story'],
	template: '#story-template'
});

new Vue({
	el: '#container'
});