JSFiddle - React, Tailwind, and code Playground

by Nicholas Bridgemohan

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ title }}</p>
  <hr>
  <app-user></app-user>
</div>

CSS

.user {
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
}

JavaScript

Vue.component('app-user', {
  data: function() {
    return {
      users: [{
        username: 'nic'
      }, {
        username: 'nic1'
      }, {
        username: 'nic2'
      }]
    };
  },
  template:'<div><div class="user" v-for="user in users"><p>username: {{user.username}}</p></div><div>'
});

new Vue({
  el: "#app",
  data: {
    title: 'hello world!',

  }
})