JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<template>
  <div>
    <h4 class="account__title hide-mobile">Manage your password</h4>
    <p class="account__desc hide-mobile">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="account-password">
      <h6 class="lead">Current Password</h6>
      <div class="form-group">
        <label class="form-group__label">Login Password</label>
        <div class="form-group__field with-addon">
          <i class="form-group__addon icon-locked"></i>
          <input name="loginPassword" type="password" class="form-group__input" v-model="currentPassword">
        </div>
      </div>
      <h6 class="lead">New Password</h6>
      <div class="form-group">
        <label class="form-group__label">Enter new Password</label>
        <div class="form-group__field with-addon">
          <i class="form-group__addon icon-locked"></i>
          <input name="password" type="password" class="form-group__input" v-model="$v.newPassword.$model">
        </div>
        <div class="field-error" v-if="(!$v.newPassword.minLength || !$v.newPassword.required) && $v.newPassword.$dirty">{{ passwordTooShort }}</div>
        <div class="field-error" v-if="(!$v.newPassword.containsUppercase) && $v.newPassword.$dirty">{{writeUppercase}}</div>
        <div class="field-error" v-if="(!$v.newPassword.containsLowercase) && $v.newPassword.$dirty">{{writeLowercase}}</div>
        <div class="field-error" v-if="(!$v.newPassword.containsNumber) && $v.newPassword.$dirty">{{writeNumber}}</div>
        <div class="field-error" v-if="(!$v.newPassword.containsSpecial) && $v.newPassword.$dirty">{{writeSpecial}}</div>
      </div>
      <div class="form-group">
        <label class="form-group__label">Re-enter New password</label>
        <div class="form-group__field with-addon" :class="{'verified': passwordsMatch }">
          <i class="form-group__addon icon-locked"></i>
          <input name="new-password" type="password" class="form-group__input"...