JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<section id="app">
  <div class="hero is-primary">
    <div class="hero-body">
    <h1 class="title">Google Keep</h1>
    
    <form class="field" @submit.prevent="addNote">
      <div class="control">
        <input
          class="input"
          type="text"
          placeholder="Entrer une note"
          @input="updateInput"
          :value="newNote">
      </div>
    </form>
  </div>
  </div>
  
  <div class="section">
    <div class="box" v-for="note in notes" :key="note.id">{{ note.text }}</div>
  </div>
</section>

Vue

const app = new Vue({
	el: '#app',
  data: {
  	newNote: '',
  	notes: []
  },
  
  methods: {
  	updateInput: function(e) {
    	this.newNote = e.target.value;
    },
  
    addNote: function(e) {
      this.notes.push({
        id: Date.now(),
        text: this.newNote
      })
      
      this.newNote = ''
    }
  }
})