JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"></script>
<script src="fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-material.css">
<div id="app">

<md-input-container :class="{'input': true, 'md-input-invalid': errors.has('email') }">
    <label>Initial value</label>
    <md-input v-validate.disable="'required|email'" placeholder="Please input" v-model="input" name="email"></md-input>
</md-input-container>
 <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>

<md-input-container>
    <label>Initial value</label>
    <md-input v-validate.disable="'confirmed:email'" name="confirmed"></md-input>
</md-input-container>
<span v-show="errors.has('confirmed')" class="help is-danger">Not equal</span>

<button @click="$validator.validateAll()">go</button>
  
</div>

CSS

body {
  font-family: arial;
  padding: 10px;
}

.is-danger {
  color: red;
}

JavaScript

Vue.use(VeeValidate);
Vue.use(VueMaterial)
 
 new Vue({
   el: '#app',
   data: function() {
     return { input: ''}
   }
 })