TailwindでカレンダーっぽいUIの作り方

簡易的なカレンダーっぽいUIを実装しようと思って調べてみたら、いい感じの見つけました

コード

<div class="p-8">
  <div class="relative grid grid-cols-7 grid-rows-5 gap-px bg-gray-200 border border-gray-200 h-96">
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
    <div class="bg-white"></div>
  </div>
</div>

参考記事

https://play.tailwindcss.com/AIl5AxxVjU