JSFiddle - React, Tailwind, and code Playground

by gongzza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>

<section id="app" class="section">
  <div class="container">
    <form @submit.prevent="onSubmit">
      <div class="field has-addons">
        <div class="control is-expanded">
          <input type="text" class="input" v-model="query">
        </div>
        <div class="control">
          <button type="submit" class="button is-primary">Generate</button>
        </div>
      </div>
    </form>
    
    <textarea class="textarea">{{result}}</textarea>
  </div>
</section>

CSS

@import url('//unpkg.com/bulma/css/bulma.css');

JavaScript

new Vue({
	el: '#app',
  data: () => ({
  	query: '',
    result: ''
  }),
  methods: {
  	onSubmit() {
    	this.result = faker.fake(this.query)
    }
  }
})