Vue-Tailwind CSS Code Snippet from MapPWA

dashboard.vue

<template>
  <div class="bg-cover bg-center relative w-full xl:px-20 px-5 xl:pt-16 xl:pb-20 pt-10">

    <a v-on:click="choosePlan(plan)">
      <button class="py-4 w-full font-poppins text-white font-semibold bg-crail">
        Last
      </button>
    </a>
    <a v-on:click="hi1()">
      <button class="py-4 w-full font-poppins text-white font-semibold bg-crail">
        Current
      </button>
    </a>
    <a v-on:click="choosePlan(plan)">
      <button class="py-4 w-full font-poppins text-white font-semibold bg-crail">
        Next
      </button>
    </a>
    <br />
    <a v-on:click="choosePlan(plan)">
      <button class="py-4 w-full font-poppins text-white font-semibold bg-crail">
        OLDER pay stubs
      </button>
    </a>
    <div v-for="paystub in paystubs" class="paystub-entry">
      <table class="paystub-entry-table">
        <tr>
          <td>
              {{ paystub.end_date }}
          </td>
          <td class="bg-black text-crail justify-center xl:py-5 xl:px-8 py-5 px-6">
            <div v-if="paystub.difference == 0">
              {{ paystub.total_pay }}
            </div>
            <div v-if="paystub.difference != 0">
              <span v-if="paystub.difference < 0" class="amount-paid-negative mx-2">
                {{ paystub.total_gttl_pay }}
              </span>
              <span v-if="paystub.difference > 0" class="amount-paid-positive mx-2">
                {{ paystub.total_pay }}
              </span>

              <span v-if="paystub.difference < 0" class="amount-paid-positive mx-2">
                {{ paystub.total_pay }}
              </span>
              <span v-if="paystub.difference > 0" class="amount-paid-negative mx-2">
                {{ paystub.total_pay }}
              </span>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Dashboard',
    data () {
      return {
        paystubs: []
      }
    },
    methods: {
      hi1: function () {
        this.$router.push({ path: 'hi1' })
      }
    },
    mounted () {
      this.$api.get('hi1s').then(response => {
        console.log(response.data.hi1s)
        this.paystubs = response.data.hi1s
      }).catch(e => {
        console.log(e)
      })
    }
  }
</script>

<style>
.paystub-entry {
  min-width: 95%;
  border: 3px solid #000;
  border-radius: 5px;
  text-align: center;
  margin: 15px 10px;
  font-weight: bold;
  font-size: larger;
}

.amount-paid-negative {
  color: red;
}

.amount-paid-positive {
  color: green;
}

.paystub-entry-table {
  width: 100%;
}

.paystub-entry-table tr {
  width: 50%;
}

.paystub-entry-table td {
  width: 50%;
}

.left-align {
  text-align: left;
}

.btn-grey {
  background-color: #ccc !important;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: 25px;
  color: #000 !important;
}
</style>