簡易的なカレンダーっぽいUIを実装しようと思って調べてみたら、いい感じの見つけました
![](https://mokubo.website/wp-content/uploads/2021/12/Screen-Shot-2021-12-26-at-16.26.07-644x444.png)
コード
<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>