JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<div id='app'>
<h2 @click='isEdit = !isEdit' :class='{"hidden": isEdit}'>
{{name}}
</h2>
<input v-model='name' :class='{"hidden": !isEdit}' ref='myInput' @blur='isEdit = !isEdit'/>
</div>

CSS

.my-input {
  border: none;
  font-size: 24px;
}

.hidden {
  display: none;
}

JavaScript

new Vue({
   el: '#app',
   data: {
     isEdit: false,
     name: 'Agus'
   }
 })