Result page boilerplate for article

result.vue

<template>
  <div class="container mx-auto pt-6 px-4 max-w-lg">
    <p class="text-4xl font-bold mb-4">Your Result</p>
    <div class="rounded bg-gray-700 p-6 text-center">
      <p class="text-green-400 font-bold uppercase">Normal</p>
      <p class="text-6xl font-bold text">{{ $route.query.bmi }}</p>
      <p class="text-gray-400 font-bold">Normal BMI Range</p>
      <p>18.5 - 24.9</p>
      <p>You have a normal body weight. Good Job!</p>
      <button class="my-4 bg-gray-600 p-4 rounded w-full">SHARE</button>
    </div>
    <button
      class="bg-superpink font-bold uppercase p-4 fixed w-full bottom-0 left-0"
    >
      RE Calculate BMI
    </button>
  </div>
</template>

<script>
export default {};
</script>