JSFiddle - React, Tailwind, and code Playground

by jeremenichelli

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.0/vue.js"></script>

<div id="app"></div>

CSS

body {
  font-family: sans-serif;
}

JavaScript

Vue.component('result', {
  template: `
    <h3 v-text="title"></h3>
    <a :href="url">Find out more</a>
  `,
  props: [ 'title', 'url' ]
});

Vue.component('results-list', {
  template: `
    <ul>
      <li v-for="r in results">
        <result :title="r.title" :url="r.url">
      </li>
    </ul>
  `,
  data() {
    return {
      results: [
        {
          title: 'Batman Begins',
          url: 'https://www.imdb.com/title/tt0372784'
        },
        {
          title: 'The Dark Knight',
          url: 'https://www.imdb.com/title/tt0468569'
        },
        {
          title: 'The Dark Knight Rises',
          url: 'https://www.imdb.com/title/tt1345836'
        }
      ]
    };
  }
});

new Vue({
  el: '#app',
  template: `
    <h1>Results</h1>
    <results-list></results-list>
  `
});