JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Calendar.vue</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"
    integrity="sha512-F+u8eWHrfY8Xw9BLzZ8rG/0wIvs0y+JyRJrXjp3VjtFPylAEEGwKbua5Ip/oiVhaTDaDs4eU2Xtsxjs/9ag2bQ=="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
</head>

<body class="py-12">
  <div class="container mx-auto flex justify-center">
    <div id="calendar" class="w-1/3 rounded border">
      <section class="flex">
        <a v-on:click="changeMonth(-1)" class="ml-4 flex-shrink cursor-pointer text-gray-800 underline">Previous</a>
        <h2 class="flex-grow text-center text-lg font-bold">{{month}}</h2>
        <a v-on:click="changeMonth(1)" class="ml-4 flex-shrink cursor-pointer text-gray-800 underline">Next</a>
      </section>
      <ul class="flex bg-gray-100 border-t text-gray-600">
        <li class="flex-1 text-center border-r last:border-r-0">S</li>
        <li class="flex-1 text-center border-r last:border-r-0">M</li>
        <li class="flex-1 text-center border-r last:border-r-0">T</li>
        <li class="flex-1 text-center border-r last:border-r-0">W</li>
        <li class="flex-1 text-center border-r last:border-r-0">R</li>
        <li class="flex-1 text-center border-r last:border-r-0">F</li>
        <li class="flex-1 text-center border-r last:border-r-0">S</li>
      </ul>
      <section>
        <ul v-for="(week, weekIndex) in weeks" :key="weekIndex" class="border-t">
          <li>
            <ul class="flex">
              <li v-for="(day, dayIndex) in week" :key="`${weekIndex}-${dayIndex}`" class="flex-1 p-1 text-center border-r last:border-r-0">
                {{day && day.getDate()}}
              </li>
            </ul>
          </li>
        </ul>
      </section>
    </div>
 ...