JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<template>
  <div class="cashier__content">
    <div class="cashier__subject">
      <span class="cashier__label">{{this.$store.state.GLOBAL_TRANSLATE_KEYS['withdraw-amount-tr']}}</span>
      <span class="cashier__desc">{{this.$store.state.GLOBAL_TRANSLATE_KEYS['balance-tr']}}: {{ balance | moneyFilter }}</span>
    </div>
    <form class="cashier__operation" @submit.prevent="setAmount(Number(amount)); nextStep()">
      <div class="form-group cashier__operation-field">
        <div class="form-group__field">
          <input :min="minAmount" :max="balance >= maxAmount ? maxAmount : balance" name="amount" type="number" v-model.number="amount" class="form-group__input cashier__operation-input">
        </div>
      </div>
      <div class="cashier__operation-buttons">
        <button type="button" class="btn" :class="sizesObject[size.number] ? 'btn-primary cashier__operation-btn select' : 'btn-default-light cashier__operation-btn'" v-for="size in this.sizesArray" :key="size.key" @click="amount=size.number; toggle(size.number)">
          {{ currencySymbol }}{{ size.number }}
        </button>
      </div>
      <form id="withdraw-form" class="cashier__details" @submit.prevent="submit()" v-if="activeWithdraw">
        <dynamicInput v-for="(w,index) in activeWithdraw.requiredField" :key="index" :fields="w" :index="index" />
        <button type="submit" class="btn btn-lg btn-text-lg btn-secondary btn-block cashier__submit">Withdraw</button>
      </form>
      <button class="btn btn-lg btn-text-lg btn-secondary btn-block cashier__submit">
        {{this.$store.state.GLOBAL_TRANSLATE_KEYS['proceed-tr']}}
      </button>
    </form>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters,
  } from 'vuex';
  import dynamicInput from "./dynamicInput"

  export default {
    name: "WithdrawSecondStep",
    props: {
      nextStep: {
        type: Function,
        required: true,
      },
      setAmount: {
        type: Function,
        required: true,
...