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.
764 lines
42 KiB
HTML
764 lines
42 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>
|
|
<div class="flex items-center">
|
|
<h2 class="flex-auto text-sm font-semibold text-gray-900">January 2022</h2>
|
|
<button
|
|
type="button"
|
|
class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
|
|
>
|
|
<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="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
|
|
>
|
|
<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="mt-10 grid grid-cols-7 text-center text-xs/6 text-gray-500">
|
|
<div>M</div>
|
|
<div>T</div>
|
|
<div>W</div>
|
|
<div>T</div>
|
|
<div>F</div>
|
|
<div>S</div>
|
|
<div>S</div>
|
|
</div>
|
|
<div class="mt-2 grid grid-cols-7 text-sm">
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2021-12-27">27</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2021-12-28">28</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2021-12-29">29</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2021-12-30">30</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2021-12-31">31</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-01">1</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-first-line
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-02">2</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-03">3</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-04">4</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-05">5</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-06">6</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-07">7</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-08">8</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-09">9</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-10">10</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-11">11</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-today
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-12">12</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-13">13</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-14">14</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-15">15</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-16">16</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-17">17</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-18">18</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-19">19</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-20">20</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-selected
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-21">21</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-22">22</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-23">23</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-24">24</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-25">25</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-26">26</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-27">27</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-28">28</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-29">29</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-30">30</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-is-current-month
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-01-31">31</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-01">1</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-02">2</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-03">3</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-04">4</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-05">5</time>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="py-2 not-data-first-line:border-t not-data-first-line:border-gray-200"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mx-auto flex size-8 items-center justify-center rounded-full not-data-is-selected:not-data-is-today:not-data-is-current-month:text-gray-400 not-data-is-selected:hover:bg-gray-200 not-data-is-selected:not-data-is-today:data-is-current-month:text-gray-900 data-is-selected:font-semibold data-is-selected:text-white data-is-selected:not-data-is-today:bg-gray-900 data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600 data-is-selected:data-is-today:bg-indigo-600"
|
|
>
|
|
<time datetime="2022-02-06">6</time>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<section class="mt-12">
|
|
<h2 class="text-base font-semibold text-gray-900">
|
|
Schedule for <time datetime="2022-01-21">January 21, 2022</time>
|
|
</h2>
|
|
<ol class="mt-4 flex flex-col gap-y-1 text-sm/6 text-gray-500">
|
|
<li
|
|
class="group flex items-center gap-x-4 rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 flex-none rounded-full"
|
|
/>
|
|
<div class="flex-auto">
|
|
<p class="text-gray-900">Leslie Alexander</p>
|
|
<p class="mt-0.5">
|
|
<time datetime="2022-01-21T13:00">1:00 PM</time> -
|
|
<time datetime="2022-01-21T14:30">2:30 PM</time>
|
|
</p>
|
|
</div>
|
|
<el-dropdown
|
|
class="relative opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
>
|
|
<button
|
|
class="relative flex items-center rounded-full text-gray-500 outline-offset-6 hover:text-gray-600"
|
|
>
|
|
<span class="absolute -inset-2"></span>
|
|
<span class="sr-only">Open options</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<el-menu
|
|
anchor="bottom end"
|
|
popover
|
|
class="w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] 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"
|
|
>Edit</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"
|
|
>Cancel</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</li>
|
|
<li
|
|
class="group flex items-center gap-x-4 rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 flex-none rounded-full"
|
|
/>
|
|
<div class="flex-auto">
|
|
<p class="text-gray-900">Michael Foster</p>
|
|
<p class="mt-0.5">
|
|
<time datetime="2022-01-21T15:00">3:00 PM</time> -
|
|
<time datetime="2022-01-21T16:30">4:30 PM</time>
|
|
</p>
|
|
</div>
|
|
<el-dropdown
|
|
class="relative opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
>
|
|
<button
|
|
class="relative flex items-center rounded-full text-gray-500 outline-offset-6 hover:text-gray-600"
|
|
>
|
|
<span class="absolute -inset-2"></span>
|
|
<span class="sr-only">Open options</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<el-menu
|
|
anchor="bottom end"
|
|
popover
|
|
class="w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] 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"
|
|
>Edit</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"
|
|
>Cancel</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</li>
|
|
<li
|
|
class="group flex items-center gap-x-4 rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 flex-none rounded-full"
|
|
/>
|
|
<div class="flex-auto">
|
|
<p class="text-gray-900">Dries Vincent</p>
|
|
<p class="mt-0.5">
|
|
<time datetime="2022-01-21T17:00">5:00 PM</time> -
|
|
<time datetime="2022-01-21T18:30">6:30 PM</time>
|
|
</p>
|
|
</div>
|
|
<el-dropdown
|
|
class="relative opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
>
|
|
<button
|
|
class="relative flex items-center rounded-full text-gray-500 outline-offset-6 hover:text-gray-600"
|
|
>
|
|
<span class="absolute -inset-2"></span>
|
|
<span class="sr-only">Open options</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<el-menu
|
|
anchor="bottom end"
|
|
popover
|
|
class="w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] 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"
|
|
>Edit</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"
|
|
>Cancel</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</li>
|
|
<li
|
|
class="group flex items-center gap-x-4 rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 flex-none rounded-full"
|
|
/>
|
|
<div class="flex-auto">
|
|
<p class="text-gray-900">Lindsay Walton</p>
|
|
<p class="mt-0.5">
|
|
<time datetime="2022-01-21T19:00">7:00 PM</time> -
|
|
<time datetime="2022-01-21T20:30">8:30 PM</time>
|
|
</p>
|
|
</div>
|
|
<el-dropdown
|
|
class="relative opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
>
|
|
<button
|
|
class="relative flex items-center rounded-full text-gray-500 outline-offset-6 hover:text-gray-600"
|
|
>
|
|
<span class="absolute -inset-2"></span>
|
|
<span class="sr-only">Open options</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<el-menu
|
|
anchor="bottom end"
|
|
popover
|
|
class="w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] 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"
|
|
>Edit</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"
|
|
>Cancel</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</div>
|