JSFiddle - React, Tailwind, and code Playground

by KomathiKarunakaran

HTML

<template>
  <v-card>
    <v-form v-model="valid" ref="form">
      <v-card-title primary-title  class="px-5">
        <h3 v-if="$route.params.id !== undefined">{{$t('message.order.editOrder')}}</h3>
        <h3 v-else>{{$t('message.order.addOrder')}}</h3>
      </v-card-title>
      <v-divider></v-divider>
      <v-layout row wrap justify-space-between align-baseline class="px-5 pa-3">
        <v-flex xs12 sm5 lg3>
          <v-select :label="$t('message.company.companyName')" :items="companiesList" item-value="id" item-text="name"  v-model="orderObj.company_id" autofocus :rules="required"></v-select>
        </v-flex>
        <v-flex xs12 sm5 lg3>
          <v-text-field :label="$t('message.order.orderNumber')" v-model="orderObj.order_nr" :rules="required" counter maxlength="50"></v-text-field>
        </v-flex>
        <v-flex xs12 sm5 lg3>
          <v-text-field :label="$t('message.order.orderName')" v-model="orderObj.order_name" :rules="required"></v-text-field>
        </v-flex>
        <v-flex xs12 sm5 lg2>
          <v-select v-model="orderObj.employees" :label="$t('message.order.assignedEmployees')" :items="employeeList" item-text="name" item-value="id" attach chips multiple></v-select>
        </v-flex>
        <v-flex xs12 sm5 lg3>
          <v-select :label="$t('message.order.manager')" :items="managerList" item-text="name" item-value="id" v-model="orderObj.manager_id" :rules="required"></v-select>
        </v-flex>
        <!-- <v-flex xs12 sm5 lg3>
          <v-select :label="$t('message.order.assistantManager')" :items="employeeList" item-text="name" item-value="id" v-model="orderObj.assistant_manager_id" :rules="required"></v-select>
        </v-flex> -->
        <v-flex xs12 sm5 lg3>
          <v-menu ref="show_start_date" :close-on-content-click="false" v-model="show_start_date" :nudge-right="40"  lazy transition="scale-transition" offset-y full-width min-width="290px">
            <v-text-field slot="activator" v-model="orderObj.start_date"...