You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1319 lines
77 KiB
HTML

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<div class="lg:flex lg:h-full lg:flex-col">
<header
class="flex items-center justify-between border-b border-gray-200 px-6 py-4 lg:flex-none"
>
<h1 class="text-base font-semibold text-gray-900">
<time datetime="2022-01">January 2022</time>
</h1>
<div class="flex items-center">
<div
class="relative flex items-center rounded-md bg-white shadow-xs md:items-stretch"
>
<button
type="button"
class="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-gray-300 pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50"
>
<span class="sr-only">Previous month</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
<button
type="button"
class="hidden border-y border-gray-300 px-3.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 focus:relative md:block"
>
Today
</button>
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
<button
type="button"
class="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-gray-300 pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50"
>
<span class="sr-only">Next month</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
<div class="hidden md:ml-4 md:flex md:items-center">
<el-dropdown class="relative">
<button
type="button"
class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
>
Month view
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="-mr-1 size-5 text-gray-400"
>
<path
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
<el-menu
anchor="bottom end"
popover
class="w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(3)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Day view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Week view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Month view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Year view</a
>
</div>
</el-menu>
</el-dropdown>
<div class="ml-6 h-6 w-px bg-gray-300"></div>
<button
type="button"
class="ml-6 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
>
Add event
</button>
</div>
<el-dropdown class="relative ml-6 md:hidden">
<button
class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500"
>
<span class="sr-only">Open menu</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
/>
</svg>
</button>
<el-menu
anchor="bottom end"
popover
class="w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(3)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Create event</a
>
</div>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Go to today</a
>
</div>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Day view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Week view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Month view</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
>Year view</a
>
</div>
</el-menu>
</el-dropdown>
</div>
</header>
<div class="shadow-sm ring-1 ring-black/5 lg:flex lg:flex-auto lg:flex-col">
<div
class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs/6 font-semibold text-gray-700 lg:flex-none"
>
<div class="flex justify-center bg-white py-2">
<span>M</span>
<span class="sr-only sm:not-sr-only">on</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>T</span>
<span class="sr-only sm:not-sr-only">ue</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>W</span>
<span class="sr-only sm:not-sr-only">ed</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>T</span>
<span class="sr-only sm:not-sr-only">hu</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>F</span>
<span class="sr-only sm:not-sr-only">ri</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>S</span>
<span class="sr-only sm:not-sr-only">at</span>
</div>
<div class="flex justify-center bg-white py-2">
<span>S</span>
<span class="sr-only sm:not-sr-only">un</span>
</div>
</div>
<div class="flex bg-gray-200 text-xs/6 text-gray-700 lg:flex-auto">
<div
class="hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px"
>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2021-12-27"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>27</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2021-12-28"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>28</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2021-12-29"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>29</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2021-12-30"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>30</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2021-12-31"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>31</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-01"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>1</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-02"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>2</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-03"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>3</time
>
<ol class="mt-2">
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Design review
</p>
<time
datetime="2022-01-03T10:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>10AM</time
>
</a>
</li>
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Sales meeting
</p>
<time
datetime="2022-01-03T14:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>2PM</time
>
</a>
</li>
</ol>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-04"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>4</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-05"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>5</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-06"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>6</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-07"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>7</time
>
<ol class="mt-2">
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Date night
</p>
<time
datetime="2022-01-08T18:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>6PM</time
>
</a>
</li>
</ol>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-08"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>8</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-09"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>9</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-10"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>10</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-11"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>11</time
>
</div>
<div
data-is-today
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-12"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>12</time
>
<ol class="mt-2">
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Sam&#039;s birthday party
</p>
<time
datetime="2022-01-25T14:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>2PM</time
>
</a>
</li>
</ol>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-13"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>13</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-14"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>14</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-15"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>15</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-16"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>16</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-17"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>17</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-18"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>18</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-19"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>19</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-20"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>20</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-21"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>21</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-22"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>22</time
>
<ol class="mt-2">
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Maple syrup museum
</p>
<time
datetime="2022-01-22T15:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>3PM</time
>
</a>
</li>
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Hockey game
</p>
<time
datetime="2022-01-22T19:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>7PM</time
>
</a>
</li>
</ol>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-23"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>23</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-24"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>24</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-25"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>25</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-26"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>26</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-27"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>27</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-28"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>28</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-29"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>29</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-30"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>30</time
>
</div>
<div
data-is-current-month
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-01-31"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>31</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-01"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>1</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-02"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>2</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-03"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>3</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-04"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>4</time
>
<ol class="mt-2">
<li>
<a href="#" class="group flex">
<p
class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600"
>
Cinema with friends
</p>
<time
datetime="2022-02-04T21:00"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>9PM</time
>
</a>
</li>
</ol>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-05"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>5</time
>
</div>
<div
class="relative bg-gray-50 px-3 py-2 text-gray-500 data-is-current-month:bg-white"
>
<time
datetime="2022-02-06"
class="in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white"
>6</time
>
</div>
</div>
<div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden">
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2021-12-27"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>27</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2021-12-28"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>28</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2021-12-29"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>29</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2021-12-30"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>30</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2021-12-31"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>31</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-01"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>1</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-02"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>2</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-03"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>3</time
>
<span class="sr-only">{day.events.length} events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-04"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>4</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-05"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>5</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-06"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>6</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-07"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>7</time
>
<span class="sr-only">{day.events.length} events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-08"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>8</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-09"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>9</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-10"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>10</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-11"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>11</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-today
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-12"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>12</time
>
<span class="sr-only">{day.events.length} events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-13"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>13</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-14"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>14</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-15"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>15</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-16"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>16</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-17"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>17</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-18"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>18</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-19"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>19</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-20"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>20</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-21"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>21</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-selected
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-22"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>22</time
>
<span class="sr-only">{day.events.length} events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-23"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>23</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-24"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>24</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-25"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>25</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-26"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>26</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-27"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>27</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-28"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>28</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-29"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>29</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-30"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>30</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
data-is-current-month
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-01-31"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>31</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-01"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>1</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-02"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>2</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-03"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>3</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-04"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>4</time
>
<span class="sr-only">{day.events.length} events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-05"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>5</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
<button
type="button"
class="flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-current-month:bg-white not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 data-is-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600"
>
<time
datetime="2022-02-06"
class="ml-auto in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600"
>6</time
>
<span class="sr-only">{day.events.length} events</span>
</button>
</div>
</div>
</div>
<div class="px-4 py-10 sm:px-6 lg:hidden">
<ol
class="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow-sm ring-1 ring-black/5"
>
<li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
<div class="flex-auto">
<p class="font-semibold text-gray-900">Maple syrup museum</p>
<time
datetime="2022-01-15T09:00"
class="mt-2 flex items-center text-gray-700"
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="mr-2 size-5 text-gray-400"
>
<path
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
3PM
</time>
</div>
<a
href="#"
class="ml-6 flex-none self-center rounded-md bg-white px-3 py-2 font-semibold text-gray-900 opacity-0 shadow-xs ring-1 ring-gray-300 ring-inset group-hover:opacity-100 hover:ring-gray-400 focus:opacity-100"
>Edit<span class="sr-only">, Maple syrup museum</span></a
>
</li>
<li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
<div class="flex-auto">
<p class="font-semibold text-gray-900">Hockey game</p>
<time
datetime="2022-01-22T19:00"
class="mt-2 flex items-center text-gray-700"
>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="mr-2 size-5 text-gray-400"
>
<path
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
7PM
</time>
</div>
<a
href="#"
class="ml-6 flex-none self-center rounded-md bg-white px-3 py-2 font-semibold text-gray-900 opacity-0 shadow-xs ring-1 ring-gray-300 ring-inset group-hover:opacity-100 hover:ring-gray-400 focus:opacity-100"
>Edit<span class="sr-only">, Hockey game</span></a
>
</li>
</ol>
</div>
</div>