JSFiddle - React, Tailwind, and code Playground

by orad

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    Name:
    <input type="text" v-model="user.name" :disabled="!isEditing"
           :class="{view: !isEditing}">   
  </div>
  <button @click="isEditing = !isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
  <button v-if="isEditing">Cancel</button>
</div>

CSS

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    isEditing: false,
    user: {
      name: 'David'
    }
  }
})