Skip to content

Instantly share code, notes, and snippets.

@justaguywhocodes

justaguywhocodes/component.html

Created March 31, 2022 04:45
Show Gist options
  • Save justaguywhocodes/78297a23f1a0efa55a1d977de05bf437 to your computer and use it in GitHub Desktop.
Save justaguywhocodes/78297a23f1a0efa55a1d977de05bf437 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
component.html
<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tailwindcss" />
<meta name="twitter:title" content="Tailwind UI" />
<meta name="twitter:description" content="Calendar examples for Tailwind CSS, designed and built by the creators of the framework." />
<meta name="twitter:image" content="https://tailwindui.com/img/og-image.png" />
<meta name="twitter:creator" content="@tailwindcss" />
<meta property="og:url" content="https://www.tailwindui.com/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Tailwind UI" />
<meta property="og:description" content="Calendar examples for Tailwind CSS, designed and built by the creators of the framework." />
<meta property="og:image" content="https://tailwindui.com/img/og-image.png" />
<meta property="description" content="Calendar examples for Tailwind CSS, designed and built by the creators of the framework." />
<meta name="csrf-token" content="jUjA8jMqL6k3KJy2DSEHi1UhmGa8azwIkIbp0lVT" />
<link rel="icon" href="../../../favicon%EF%B9%96v=1.ico">
<link rel="icon" type="image/png" sizes="32x32" href="../../../favicon-32x32%EF%B9%96v=1.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../../favicon-16x16%EF%B9%96v=1.png" />
<link rel="preload" href="../../../fonts/Inter-roman.var%EF%B9%96v=3.18.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="../../../css/app%EF%B9%96id=37145931fafe5943ee15a0e56b1aea61.css" />
<title>Calendars - Official Tailwind CSS UI Components</title>
<script>
function getActiveSnippet() {
try {
if (['html', 'react', 'vue'].includes(localStorage.activeSnippet)) {
return localStorage.activeSnippet
}
return 'html'
} catch (_) {
return 'html'
}
}
document.querySelector('html').classList.add('snippet-' + getActiveSnippet())
</script>
</head>
<body class="font-sans antialiased text-gray-600 min-h-full flex flex-col ">
<header class="flex-none relative z-50 text-sm leading-6 font-medium ring-1 ring-gray-900 ring-opacity-5 shadow-sm py-5 bg-white">
<nav aria-label="Global" class="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center ">
<a href="../../../index.html" class="flex-none text-gray-900">
<span class="sr-only">Tailwind UI</span>
<svg aria-hidden="true" viewBox="0 0 160 24" fill="none" class="w-auto h-6">
<path d="M18.724 1.714c-4.538 0-7.376 2.286-8.51 6.857 1.702-2.285 3.687-3.143 5.957-2.57 1.296.325 2.22 1.271 3.245 2.318 1.668 1.706 3.6 3.681 7.819 3.681 4.539 0 7.376-2.286 8.51-6.857-1.701 2.286-3.687 3.143-5.957 2.571-1.294-.325-2.22-1.272-3.245-2.32-1.668-1.705-3.6-3.68-7.819-3.68zM10.214 12c-4.539 0-7.376 2.286-8.51 6.857 1.701-2.286 3.687-3.143 5.957-2.571 1.294.325 2.22 1.272 3.245 2.32 1.668 1.705 3.6 3.68 7.818 3.68 4.54 0 7.377-2.286 8.511-6.857-1.702 2.286-3.688 3.143-5.957 2.571-1.295-.326-2.22-1.272-3.245-2.32-1.669-1.705-3.6-3.68-7.82-3.68z" fill="#06B6D4"/>
<path d="M51.285 9.531V6.857h-3.166v-3.6l-2.758.823v2.777h-2.348v2.674h2.348v6.172c0 3.343 1.686 4.526 5.924 4.011V17.22c-2.094.103-3.166.129-3.166-1.517V9.53h3.166zm12.087-2.674v1.826c-.97-1.337-2.476-2.16-4.468-2.16-3.472 0-6.357 2.931-6.357 6.763 0 3.805 2.885 6.763 6.357 6.763 1.992 0 3.498-.823 4.468-2.186v1.851h2.758V6.857h-2.758zM59.338 17.4c-2.297 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115s4.034 1.723 4.034 4.115c0 2.391-1.736 4.114-4.034 4.114zM70.723 4.929c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm5.96 0h2.757V.943h-2.758v18.771zM95.969 6.857l-2.502 8.872-2.655-8.872h-2.63L85.5 15.73l-2.477-8.872h-2.91l4.008 12.857h2.707l2.68-8.665 2.656 8.665h2.706L98.88 6.857h-2.911zm6.32-1.928c.97 0 1.762-.823 1.762-1.775 0-.977-.792-1.774-1.762-1.774s-1.762.797-1.762 1.774c0 .952.792 1.775 1.762 1.775zm-1.379 14.785h2.758V6.857h-2.758v12.857zm12.674-13.191c-1.736 0-3.115.643-3.957 1.98V6.857h-2.758v12.857h2.758v-6.891c0-2.623 1.43-3.703 3.242-3.703 1.737 0 2.86 1.029 2.86 2.983v7.611h2.757V11.82c0-3.343-2.042-5.297-4.902-5.297zm17.982-4.809v6.969c-.971-1.337-2.477-2.16-4.468-2.16-3.473 0-6.358 2.931-6.358 6.763 0 3.805 2.885 6.763 6.358 6.763 1.991 0 3.497-.823 4.468-2.186v1.851h2.757v-18h-2.757zM127.532 17.4c-2.298 0-4.034-1.723-4.034-4.114 0-2.392 1.736-4.115 4.034-4.115 2.297 0 4.034 1.723 4.034 4.115 0 2.391-1.737 4.114-4.034 4.114z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M145.532 3.429h8.511c.902 0 1.768.36 2.407 1.004.638.643.997 1.515.997 2.424v8.572c0 .909-.359 1.781-.997 2.424a3.394 3.394 0 01-2.407 1.004h-8.511a3.39 3.39 0 01-2.407-1.004 3.438 3.438 0 01-.997-2.424V6.857c0-.91.358-1.781.997-2.424a3.39 3.39 0 012.407-1.004zm-5.106 3.428c0-1.364.538-2.672 1.495-3.636a5.09 5.09 0 013.611-1.507h8.511c1.354 0 2.653.542 3.61 1.507a5.16 5.16 0 011.496 3.636v8.572a5.16 5.16 0 01-1.496 3.636 5.086 5.086 0 01-3.61 1.506h-8.511a5.09 5.09 0 01-3.611-1.506 5.164 5.164 0 01-1.495-3.636V6.857zm10.907 6.251c0 1.812-1.359 2.916-3.193 2.916-1.823 0-3.182-1.104-3.182-2.916v-5.65h1.633v5.52c0 .815.429 1.427 1.549 1.427 1.12 0 1.549-.612 1.549-1.428v-5.52h1.644v5.652zm1.72 2.748V7.457h1.644v8.4h-1.644z" fill="currentColor"/>
</svg>
</a>
<p class="hidden lg:block text-sm ml-6 border-l border-gray-200 pl-6">
<a href="https://tailwindcss.com/blog/tailwindcss-v3" target="_blank" class="relative flex items-center hover:text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
</svg>
Ready for Tailwind CSS v3.0
<svg aria-hidden="true" width="11" height="11" fill="currentColor" class="ml-1.5">
<path d="M5.593 10.139L10.232 5.5 5.593.862l-.895.89 3.107 3.102H0v1.292h7.805L4.698 9.254l.895.885z"/>
</svg>
</a>
</p>
<div class="ml-auto flex items-center">
<a href="../../../index.html" class="hidden sm:block hover:text-gray-900">Components</a>
<a href="../../../documentation.html" class="hidden sm:block ml-6 mr-2 hover:text-gray-900">Documentation</a>
<button type="button" x-data @click="$dispatch('open-command-palette')" class="-my-1 mr-3 sm:mx-2.5 w-8 h-8 rounded-lg flex items-center justify-center">
<span class="sr-only">Search components</span>
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" class="w-5 h-5 text-gray-900">
<circle cx="8.5" cy="8.5" r="5.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.25 17.25L13 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div x-data="{ open: false }" x-init="window.addEventListener('focus', event => { if (open && !$el.contains(event.target)) open = false }, true)" @click.away="open = false" @keydown.escape="open = false;$refs.toggle.focus()" class="relative sm:border-l -mr-1.5 sm:ml-2 sm:mr-0 sm:pl-6 border-gray-200">
<button type="button" x-ref="toggle" @click="open = !open" aria-expanded="false" :aria-expanded="open" class="font-medium flex items-center">
<span class="hidden sm:flex items-center">
Account
<svg aria-hidden="true" width="8" height="6" fill="none" class="ml-2.5 text-gray-400">
<path d="M7 1.5l-3 3-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span class="flex sm:hidden -my-1 w-8 h-8 rounded-lg items-center justify-center">
<svg aria-hidden="true" width="20" height="20" fill="none" class="text-gray-900">
<path d="M3.75 4.75h12.5M3.75 9.75h12.5M3.75 14.75h12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
<div x-cloak x-show="open" class="absolute top-full right-0 w-60 mt-3 -mr-0.5 sm:-mr-3.5 bg-white rounded-lg shadow-md ring-1 ring-gray-900 ring-opacity-5 font-normal text-sm text-gray-900 divide-y divide-gray-100">
<p class="py-3 px-3.5 truncate">
<span class="block mb-0.5 text-xs text-gray-500">Signed in as</span>
<span class="font-semibold">[email protected]</span>
</p>
<div class="py-1.5 px-3.5">
<a href="../../../index.html" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<rect x="2.75" y="2.75" width="5.5" height="5.5" rx="1" />
<rect x="2.75" y="11.75" width="5.5" height="5.5" rx="1" />
<rect x="11.75" y="11.75" width="5.5" height="5.5" rx="2.75" />
<path d="M13.616 3.305a1 1 0 011.79.004l1.731 3.498a1 1 0 01-.896 1.443H12.76a1 1 0 01-.894-1.448l1.751-3.497z" />
</svg>
Components
</a>
<a href="../../../documentation.html" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<path d="M5.75 17.25h8.5a2 2 0 002-2V7L12 2.75H5.75a2 2 0 00-2 2v10.5a2 2 0 002 2z" />
<path d="M11.75 3v4.25H16M6.75 10.75h6.5M6.75 13.75h6.5" />
</svg>
Documentation
</a>
<a href="../../../changelog.html" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<rect x="7.75" y="2.75" width="4.5" height="4.5" rx="2.25" />
<rect x="7.75" y="12.75" width="4.5" height="4.5" rx="2.25" />
<path d="M10 7.5v5" />
</svg>
Changelog
</a>
<a href="../../../support.html" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<rect x="2.75" y="2.75" width="14.5" height="14.5" rx="7.25" />
<rect x="6.75" y="6.75" width="6.5" height="6.5" rx="3.25" />
<path d="M5 15l2.5-2.5M15 5l-2.5 2.5M15 15l-2.5-2.5M5 5l2.5 2.5" />
</svg>
Support
</a>
<a href="../../../license.html" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<circle cx="10" cy="8" r="5.25" />
<path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5" />
</svg>
License
</a>
</div>
<div class="py-1.5 px-3.5">
<a href="../../../documentation.html#figma-assets" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<path d="M6 13.25a3.25 3.25 0 01-1.1-6.31c.473-.17.865-.562.996-1.047a4.252 4.252 0 018.209 0c.13.485.522.878.995 1.048A3.251 3.251 0 0114 13.25M10 11.75v5.5M7.75 14.75l2.25 2.5 2.25-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Download Figma Assets
</a>
</div>
<div class="py-1.5 px-3.5">
<a href="../../../upgrade-team.html" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<rect x="4.75" y="6.75" width="4.5" height="4.5" rx="2.25" stroke="#9CA3AF" stroke-width="1.5"/>
<rect x="10.75" y="2.75" width="4.5" height="4.5" rx="2.25" stroke="#9CA3AF" stroke-width="1.5"/>
<path d="M11.179 16.52c-.854-1.416-2.035-2.77-4.171-2.77s-3.318 1.353-4.171 2.77a.484.484 0 00.425.73h7.492c.379 0 .62-.406.425-.73zM12.75 9.75c2.14 0 3.51 1.358 4.418 2.776.204.32-.035.724-.414.724H12.75" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Upgrade to Team License
</a>
</div>
<div class="py-1.5 px-3.5">
<a href="../../../account-settings.html" class="group flex items-center py-1.5 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<rect x="7.75" y="5.75" width="4.5" height="4.5" rx="2.25" />
<rect x="2.75" y="2.75" width="14.5" height="14.5" rx="7.25" />
<path d="M14.618 15.5A5.249 5.249 0 0010 12.75a5.249 5.249 0 00-4.618 2.75" />
</svg>
Account Settings
</a>
<form method="POST" action="https://tailwindui.com/logout">
<input type="hidden" name="_token" value="jUjA8jMqL6k3KJy2DSEHi1UhmGa8azwIkIbp0lVT"> <button type="submit" class="group flex w-full items-center py-1.5 text-gray-900 hover:text-teal-600">
<svg aria-hidden="true" width="20" height="20" fill="none" class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
<path d="M10.25 3.75H9A6.25 6.25 0 002.75 10v0A6.25 6.25 0 009 16.25h1.25M10.75 10h6.5M14.75 12.25l2.5-2.25-2.5-2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Sign out
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main class="flex-auto ">
<div class="overflow-hidden">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="flex flex-col mb-8">
<h1 class="order-1 text-gray-900 text-3xl font-extrabold tracking-tight mt-2">Calendars</h1>
<nav aria-label="Breadcrumb" class="flex items-center text-gray-500 text-sm font-medium space-x-2 whitespace-nowrap">
<a href="../../../index.html#product-application-ui" class="hover:text-gray-900">
Application UI
</a>
<svg aria-hidden="true" width="24" height="24" fill="none" class="flex-none text-gray-300">
<path d="M10.75 8.75l3.5 3.25-3.5 3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<a href="../../../index.html#product-application-ui-data-display" aria-current="page" class="truncate hover:text-gray-900">
Data Display
</a>
</nav>
</div>
<div class="space-y-20">
<section
aria-labelledby="heading-c6e8b2bf7f65e8987b7012d3bbe5caf1"
id="component-c6e8b2bf7f65e8987b7012d3bbe5caf1"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div&gt;\n &lt;h2 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;Upcoming meetings&lt;\/h2&gt;\n &lt;div class=\&quot;lg:grid lg:grid-cols-12 lg:gap-x-16\&quot;&gt;\n &lt;div class=\&quot;mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9\&quot;&gt;\n &lt;div class=\&quot;flex items-center text-gray-900\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;div class=\&quot;flex-auto font-semibold\&quot;&gt;January&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;!--\n Always include: \&quot;py-1.5 hover:bg-gray-100 focus:z-10\&quot;\n Is current month, include: \&quot;bg-white\&quot;\n Is not current month, include: \&quot;bg-gray-50\&quot;\n Is selected or is today, include: \&quot;font-semibold\&quot;\n Is selected, include: \&quot;text-white\&quot;\n Is not selected, is not today, and is current month, include: \&quot;text-gray-900\&quot;\n Is not selected, is not today, and is not current month, include: \&quot;text-gray-400\&quot;\n Is today and is not selected, include: \&quot;text-indigo-600\&quot;\n\n Top left day, include: \&quot;rounded-tl-lg\&quot;\n Top right day, include: \&quot;rounded-tr-lg\&quot;\n Bottom left day, include: \&quot;rounded-bl-lg\&quot;\n Bottom right day, include: \&quot;rounded-br-lg\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;!--\n Always include: \&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;\n Is selected and is today, include: \&quot;bg-indigo-600\&quot;\n Is selected and is not today, include: \&quot;bg-gray-900\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 font-semibold text-white\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-bl-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none mt-8 w-full rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;ol class=\&quot;mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8\&quot;&gt;\n &lt;li class=\&quot;relative flex space-x-6 py-6 xl:static\&quot;&gt;\n &lt;img src=\&quot;https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80\&quot; alt=\&quot;\&quot; class=\&quot;h-14 w-14 flex-none rounded-full\&quot;&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;h3 class=\&quot;pr-10 font-semibold text-gray-900 xl:pr-0\&quot;&gt;Leslie Alexander&lt;\/h3&gt;\n &lt;dl class=\&quot;mt-2 flex flex-col text-gray-500 xl:flex-row\&quot;&gt;\n &lt;div class=\&quot;flex items-start space-x-3\&quot;&gt;\n &lt;dt class=\&quot;mt-0.5\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Date&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/calendar --&gt;\n &lt;svg class=\&quot;h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;&lt;time datetime=\&quot;2022-01-10T17:00\&quot;&gt;January 10th, 2022 at 5:00 PM&lt;\/time&gt;&lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5\&quot;&gt;\n &lt;dt class=\&quot;mt-0.5\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Location&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/location-marker --&gt;\n &lt;svg class=\&quot;h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;Starbucks&lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;\/dl&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center\&quot;&gt;\n &lt;div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open options&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/dots-horizontal --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path d=\&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Edit&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Cancel&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/li&gt;\n\n &lt;!-- More meetings... --&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment } from &#039;react&#039;\nimport {\n CalendarIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n LocationMarkerIcon,\n} from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\n\nconst meetings = [\n {\n id: 1,\n date: &#039;January 10th, 2022&#039;,\n time: &#039;5:00 PM&#039;,\n datetime: &#039;2022-01-10T17:00&#039;,\n name: &#039;Leslie Alexander&#039;,\n imageUrl:\n &#039;https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&#039;,\n location: &#039;Starbucks&#039;,\n },\n \/\/ More meetings...\n]\nconst days = [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true, isSelected: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n]\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n return (\n &lt;div&gt;\n &lt;h2 className=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;Upcoming meetings&lt;\/h2&gt;\n &lt;div className=\&quot;lg:grid lg:grid-cols-12 lg:gap-x-16\&quot;&gt;\n &lt;div className=\&quot;mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9\&quot;&gt;\n &lt;div className=\&quot;flex items-center text-gray-900\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;div className=\&quot;flex-auto font-semibold\&quot;&gt;January&lt;\/div&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n {days.map((day, dayIdx) =&gt; (\n &lt;button\n key={day.date}\n type=\&quot;button\&quot;\n className={classNames(\n &#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;,\n day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;,\n (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;,\n day.isSelected &amp;&amp; &#039;text-white&#039;,\n !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;,\n !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-400&#039;,\n day.isToday &amp;&amp; !day.isSelected &amp;&amp; &#039;text-indigo-600&#039;,\n dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;,\n dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;,\n dayIdx === days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;,\n dayIdx === days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={classNames(\n &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;,\n day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;,\n day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;\n )}\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n &lt;\/button&gt;\n ))}\n &lt;\/div&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;focus:outline-none mt-8 w-full rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;\n &gt;\n Add event\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;ol className=\&quot;mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8\&quot;&gt;\n {meetings.map((meeting) =&gt; (\n &lt;li key={meeting.id} className=\&quot;relative flex space-x-6 py-6 xl:static\&quot;&gt;\n &lt;img src={meeting.imageUrl} alt=\&quot;\&quot; className=\&quot;h-14 w-14 flex-none rounded-full\&quot; \/&gt;\n &lt;div className=\&quot;flex-auto\&quot;&gt;\n &lt;h3 className=\&quot;pr-10 font-semibold text-gray-900 xl:pr-0\&quot;&gt;{meeting.name}&lt;\/h3&gt;\n &lt;dl className=\&quot;mt-2 flex flex-col text-gray-500 xl:flex-row\&quot;&gt;\n &lt;div className=\&quot;flex items-start space-x-3\&quot;&gt;\n &lt;dt className=\&quot;mt-0.5\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Date&lt;\/span&gt;\n &lt;CalendarIcon className=\&quot;h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;\n &lt;time dateTime={meeting.datetime}&gt;\n {meeting.date} at {meeting.time}\n &lt;\/time&gt;\n &lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5\&quot;&gt;\n &lt;dt className=\&quot;mt-0.5\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Location&lt;\/span&gt;\n &lt;LocationMarkerIcon className=\&quot;h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;{meeting.location}&lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;\/dl&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center\&quot;&gt;\n &lt;div&gt;\n &lt;Menu.Button className=\&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Open options&lt;\/span&gt;\n &lt;DotsHorizontalIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n &lt;\/div&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Edit\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Cancel\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;\/li&gt;\n ))}\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div&gt;\n &lt;h2 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;Upcoming meetings&lt;\/h2&gt;\n &lt;div class=\&quot;lg:grid lg:grid-cols-12 lg:gap-x-16\&quot;&gt;\n &lt;div class=\&quot;mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9\&quot;&gt;\n &lt;div class=\&quot;flex items-center text-gray-900\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;div class=\&quot;flex-auto font-semibold\&quot;&gt;January&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;button v-for=\&quot;(day, dayIdx) in days\&quot; :key=\&quot;day.date\&quot; type=\&quot;button\&quot; :class=\&quot;[&#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;, day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;, (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;, day.isSelected &amp;&amp; &#039;text-white&#039;, !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;, !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-400&#039;, day.isToday &amp;&amp; !day.isSelected &amp;&amp; &#039;text-indigo-600&#039;, dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;, dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;, dayIdx === days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;, dayIdx === days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;[&#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;, day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;, day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;]\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none mt-8 w-full rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;ol class=\&quot;mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8\&quot;&gt;\n &lt;li v-for=\&quot;meeting in meetings\&quot; :key=\&quot;meeting.id\&quot; class=\&quot;relative flex space-x-6 py-6 xl:static\&quot;&gt;\n &lt;img :src=\&quot;meeting.imageUrl\&quot; alt=\&quot;\&quot; class=\&quot;h-14 w-14 flex-none rounded-full\&quot; \/&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;h3 class=\&quot;pr-10 font-semibold text-gray-900 xl:pr-0\&quot;&gt;{{ meeting.name }}&lt;\/h3&gt;\n &lt;dl class=\&quot;mt-2 flex flex-col text-gray-500 xl:flex-row\&quot;&gt;\n &lt;div class=\&quot;flex items-start space-x-3\&quot;&gt;\n &lt;dt class=\&quot;mt-0.5\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Date&lt;\/span&gt;\n &lt;CalendarIcon class=\&quot;h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;\n &lt;time :datetime=\&quot;meeting.datetime\&quot;&gt;{{ meeting.date }} at {{ meeting.time }}&lt;\/time&gt;\n &lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5\&quot;&gt;\n &lt;dt class=\&quot;mt-0.5\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Location&lt;\/span&gt;\n &lt;LocationMarkerIcon class=\&quot;h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/dt&gt;\n &lt;dd&gt;{{ meeting.location }}&lt;\/dd&gt;\n &lt;\/div&gt;\n &lt;\/dl&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center\&quot;&gt;\n &lt;div&gt;\n &lt;MenuButton class=\&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open options&lt;\/span&gt;\n &lt;DotsHorizontalIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n &lt;\/div&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Edit&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Cancel&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport {\n CalendarIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n LocationMarkerIcon,\n} from &#039;@heroicons\/vue\/solid&#039;\nimport { Menu, MenuButton, MenuItem, MenuItems } from &#039;@headlessui\/vue&#039;\n\nconst meetings = [\n {\n id: 1,\n date: &#039;January 10th, 2022&#039;,\n time: &#039;5:00 PM&#039;,\n datetime: &#039;2022-01-10T17:00&#039;,\n name: &#039;Leslie Alexander&#039;,\n imageUrl:\n &#039;https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&#039;,\n location: &#039;Starbucks&#039;,\n },\n \/\/ More meetings...\n]\nconst days = [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true, isSelected: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n]\n\nexport default {\n components: {\n Menu,\n MenuButton,\n MenuItem,\n MenuItems,\n CalendarIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n LocationMarkerIcon,\n },\n setup() {\n return {\n meetings,\n days,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-c6e8b2bf7f65e8987b7012d3bbe5caf1" class="font-medium text-gray-900 truncate">
<a href="#component-c6e8b2bf7f65e8987b7012d3bbe5caf1" class="mr-1">Small with meetings</a>
</h2>
<span class="hidden lg:block flex-none uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1 rounded-md ml-3">
Requires <abbr title="JavaScript">JS</abbr>
</span>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-c6e8b2bf7f65e8987b7012d3bbe5caf1 {
height: 1227px;
}
@media (min-width: 704px) {
#frame-c6e8b2bf7f65e8987b7012d3bbe5caf1 {
height: 632px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-c6e8b2bf7f65e8987b7012d3bbe5caf1" class="bg-white">
<iframe x-ref="iframe" title="Small with meetings preview" aria-label="Small with meetings preview" name="frame-c6e8b2bf7f65e8987b7012d3bbe5caf1" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/components-v2.js?id=c08ed7087921a2a8b1bfe052e9ed5b36&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;script src=&quot;/js/alpine.js?id=aec657470ad97cbba5c2659fd719c2de&quot; defer&gt;&lt;/script&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;div class=&quot;&quot; style=&quot;&quot;&gt;
&lt;div class=&quot;bg-white&quot;&gt;
&lt;div class=&quot;mx-auto max-w-lg py-8 px-6 lg:max-w-4xl xl:max-w-6xl&quot;&gt;
&lt;div&gt;
&lt;h2 class=&quot;text-lg font-semibold text-gray-900&quot;&gt;Upcoming meetings&lt;/h2&gt;
&lt;div class=&quot;lg:grid lg:grid-cols-12 lg:gap-x-16&quot;&gt;
&lt;div class=&quot;mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9&quot;&gt;
&lt;div class=&quot;flex items-center text-gray-900&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Previous month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-left&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div class=&quot;flex-auto font-semibold&quot;&gt;January&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Next month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-right&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200&quot;&gt;
&lt;!--
Always include: &quot;py-1.5 hover:bg-gray-100 focus:z-10&quot;
Is current month, include: &quot;bg-white&quot;
Is not current month, include: &quot;bg-gray-50&quot;
Is selected or is today, include: &quot;font-semibold&quot;
Is selected, include: &quot;text-white&quot;
Is not selected, is not today, and is current month, include: &quot;text-gray-900&quot;
Is not selected, is not today, and is not current month, include: &quot;text-gray-400&quot;
Is today and is not selected, include: &quot;text-indigo-600&quot;
Top left day, include: &quot;rounded-tl-lg&quot;
Top right day, include: &quot;rounded-tr-lg&quot;
Bottom left day, include: &quot;rounded-bl-lg&quot;
Bottom right day, include: &quot;rounded-br-lg&quot;
--&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;!--
Always include: &quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;
Is selected and is today, include: &quot;bg-indigo-600&quot;
Is selected and is not today, include: &quot;bg-gray-900&quot;
--&gt;
&lt;time datetime=&quot;2021-12-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 font-semibold text-white&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;focus:outline-none mt-8 w-full rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2&quot;&gt;Add event&lt;/button&gt;
&lt;/div&gt;
&lt;ol class=&quot;mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8&quot;&gt;
&lt;li class=&quot;relative flex space-x-6 py-6 xl:static&quot;&gt;
&lt;img src=&quot;https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot; alt=&quot;&quot; class=&quot;h-14 w-14 flex-none rounded-full&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;h3 class=&quot;pr-10 font-semibold text-gray-900 xl:pr-0&quot;&gt;Leslie Alexander&lt;/h3&gt;
&lt;dl class=&quot;mt-2 flex flex-col text-gray-500 xl:flex-row&quot;&gt;
&lt;div class=&quot;flex items-start space-x-3&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Date&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/calendar&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;&lt;time datetime=&quot;2022-01-10T17:00&quot;&gt;January 10th, 2022 at 5:00 PM&lt;/time&gt;&lt;/dd&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Location&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/location-marker&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;Starbucks&lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center&quot;&gt;
&lt;div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600&quot; id=&quot;menu-0-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open options&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-0-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Edit&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;relative flex space-x-6 py-6 xl:static&quot;&gt;
&lt;img src=&quot;https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot; alt=&quot;&quot; class=&quot;h-14 w-14 flex-none rounded-full&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;h3 class=&quot;pr-10 font-semibold text-gray-900 xl:pr-0&quot;&gt;Michael Foster&lt;/h3&gt;
&lt;dl class=&quot;mt-2 flex flex-col text-gray-500 xl:flex-row&quot;&gt;
&lt;div class=&quot;flex items-start space-x-3&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Date&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/calendar&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;&lt;time datetime=&quot;2022-01-12T15:00&quot;&gt;January 12th, 2022 at 3:00 PM&lt;/time&gt;&lt;/dd&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Location&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/location-marker&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;Tim Hortons&lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center&quot;&gt;
&lt;div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600&quot; id=&quot;menu-1-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open options&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-1-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-1-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Edit&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-1-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;relative flex space-x-6 py-6 xl:static&quot;&gt;
&lt;img src=&quot;https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot; alt=&quot;&quot; class=&quot;h-14 w-14 flex-none rounded-full&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;h3 class=&quot;pr-10 font-semibold text-gray-900 xl:pr-0&quot;&gt;Dries Vincent&lt;/h3&gt;
&lt;dl class=&quot;mt-2 flex flex-col text-gray-500 xl:flex-row&quot;&gt;
&lt;div class=&quot;flex items-start space-x-3&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Date&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/calendar&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;&lt;time datetime=&quot;2022-01-12T17:00&quot;&gt;January 12th, 2022 at 5:00 PM&lt;/time&gt;&lt;/dd&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Location&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/location-marker&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;Costa Coffee at Braehead&lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center&quot;&gt;
&lt;div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600&quot; id=&quot;menu-2-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open options&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-2-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-2-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Edit&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-2-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;relative flex space-x-6 py-6 xl:static&quot;&gt;
&lt;img src=&quot;https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot; alt=&quot;&quot; class=&quot;h-14 w-14 flex-none rounded-full&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;h3 class=&quot;pr-10 font-semibold text-gray-900 xl:pr-0&quot;&gt;Lindsay Walton&lt;/h3&gt;
&lt;dl class=&quot;mt-2 flex flex-col text-gray-500 xl:flex-row&quot;&gt;
&lt;div class=&quot;flex items-start space-x-3&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Date&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/calendar&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;&lt;time datetime=&quot;2022-01-14T10:00&quot;&gt;January 14th, 2022 at 10:00 AM&lt;/time&gt;&lt;/dd&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Location&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/location-marker&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;Silverburn&lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center&quot;&gt;
&lt;div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600&quot; id=&quot;menu-3-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open options&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-3-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-3-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Edit&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-3-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;relative flex space-x-6 py-6 xl:static&quot;&gt;
&lt;img src=&quot;https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot; alt=&quot;&quot; class=&quot;h-14 w-14 flex-none rounded-full&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;h3 class=&quot;pr-10 font-semibold text-gray-900 xl:pr-0&quot;&gt;Courtney Henry&lt;/h3&gt;
&lt;dl class=&quot;mt-2 flex flex-col text-gray-500 xl:flex-row&quot;&gt;
&lt;div class=&quot;flex items-start space-x-3&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Date&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/calendar&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;&lt;time datetime=&quot;2022-01-14T12:00&quot;&gt;January 14th, 2022 at 12:00 PM&lt;/time&gt;&lt;/dd&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5&quot;&gt;
&lt;dt class=&quot;mt-0.5&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Location&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/location-marker&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/dt&gt;
&lt;dd&gt;The Glasgow Green&lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;absolute top-6 right-0 xl:relative xl:top-auto xl:right-auto xl:self-center&quot;&gt;
&lt;div&gt;
&lt;button type=&quot;button&quot; class=&quot;-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600&quot; id=&quot;menu-4-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open options&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-4-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-4-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Edit&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-4-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-c29139529079ea762f118812bbeaeb9e"
id="component-c29139529079ea762f118812bbeaeb9e"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div class=\&quot;lg:flex lg:h-full lg:flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6 lg:flex-none\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot;&gt;&lt;\/span&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;div class=\&quot;relative\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot; id=\&quot;menu-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n Month view\n &lt;!-- Heroicon name: solid\/chevron-down --&gt;\n &lt;svg class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-0\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-1\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-2\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-3\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot;&gt;&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/dots-horizontal --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path d=\&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-2\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-3\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-4\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-5\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col\&quot;&gt;\n &lt;div class=\&quot;grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none\&quot;&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;M&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;on&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;T&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ue&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;W&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ed&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;T&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;hu&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;F&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ri&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;S&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;at&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;S&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;un&lt;\/span&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto\&quot;&gt;\n &lt;div class=\&quot;hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px\&quot;&gt;\n &lt;!--\n Always include: \&quot;relative py-2 px-3\&quot;\n Is current month, include: \&quot;bg-white\&quot;\n Is not current month, include: \&quot;bg-gray-50 text-gray-500\&quot;\n --&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;!--\n Is today, include: \&quot;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot;&gt;27&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot;&gt;28&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot;&gt;29&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot;&gt;30&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot;&gt;31&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot;&gt;1&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot;&gt;2&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot;&gt;3&lt;\/time&gt;\n &lt;ol class=\&quot;mt-2\&quot;&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Design review&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-03T10:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;10AM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Sales meeting&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-03T14:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;2PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot;&gt;4&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot;&gt;5&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot;&gt;6&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot;&gt;7&lt;\/time&gt;\n &lt;ol class=\&quot;mt-2\&quot;&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Date night&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-08T18:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;6PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot;&gt;8&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot;&gt;9&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot;&gt;10&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot;&gt;11&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/time&gt;\n &lt;ol class=\&quot;mt-2\&quot;&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Sam&#039;s birthday party&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-25T14:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;2PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot;&gt;13&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot;&gt;14&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot;&gt;15&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot;&gt;16&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot;&gt;17&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot;&gt;18&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot;&gt;19&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot;&gt;20&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot;&gt;21&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot;&gt;22&lt;\/time&gt;\n &lt;ol class=\&quot;mt-2\&quot;&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Maple syrup museum&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-22T15:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;3PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Hockey game&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-22T19:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;7PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot;&gt;23&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot;&gt;24&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot;&gt;25&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot;&gt;26&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot;&gt;27&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot;&gt;28&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot;&gt;29&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot;&gt;30&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-white py-2 px-3\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot;&gt;31&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot;&gt;1&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot;&gt;2&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot;&gt;3&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot;&gt;4&lt;\/time&gt;\n &lt;ol class=\&quot;mt-2\&quot;&gt;\n &lt;li&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;Cinema with friends&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-02-04T21:00\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;9PM&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot;&gt;5&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative bg-gray-50 py-2 px-3 text-gray-500\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot;&gt;6&lt;\/time&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden\&quot;&gt;\n &lt;!--\n Always include: \&quot;flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10\&quot;\n Is current month, include: \&quot;bg-white\&quot;\n Is not current month, include: \&quot;bg-gray-50\&quot;\n Is selected or is today, include: \&quot;font-semibold\&quot;\n Is selected, include: \&quot;text-white\&quot;\n Is not selected and is today, include: \&quot;text-indigo-600\&quot;\n Is not selected and is current month, and is not today, include: \&quot;text-gray-900\&quot;\n Is not selected, is not current month, and is not today: \&quot;text-gray-500\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;!--\n Always include: \&quot;ml-auto\&quot;\n Is selected, include: \&quot;flex h-6 w-6 items-center justify-center rounded-full\&quot;\n Is selected and is today, include: \&quot;bg-indigo-600\&quot;\n Is selected and is not today, include: \&quot;bg-gray-900\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot; class=\&quot;ml-auto\&quot;&gt;27&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot; class=\&quot;ml-auto\&quot;&gt;28&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot; class=\&quot;ml-auto\&quot;&gt;29&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot; class=\&quot;ml-auto\&quot;&gt;30&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot; class=\&quot;ml-auto\&quot;&gt;31&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;ml-auto\&quot;&gt;1&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot; class=\&quot;ml-auto\&quot;&gt;2&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot; class=\&quot;ml-auto\&quot;&gt;3&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;2 events&lt;\/p&gt;\n &lt;div class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot; class=\&quot;ml-auto\&quot;&gt;4&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot; class=\&quot;ml-auto\&quot;&gt;5&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot; class=\&quot;ml-auto\&quot;&gt;6&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot; class=\&quot;ml-auto\&quot;&gt;7&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;1 event&lt;\/p&gt;\n &lt;div class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot; class=\&quot;ml-auto\&quot;&gt;8&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot; class=\&quot;ml-auto\&quot;&gt;9&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot; class=\&quot;ml-auto\&quot;&gt;10&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot; class=\&quot;ml-auto\&quot;&gt;11&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;ml-auto\&quot;&gt;12&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;1 event&lt;\/p&gt;\n &lt;div class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot; class=\&quot;ml-auto\&quot;&gt;13&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot; class=\&quot;ml-auto\&quot;&gt;14&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot; class=\&quot;ml-auto\&quot;&gt;15&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot; class=\&quot;ml-auto\&quot;&gt;16&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;ml-auto\&quot;&gt;17&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;ml-auto\&quot;&gt;18&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;ml-auto\&quot;&gt;19&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;ml-auto\&quot;&gt;20&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot; class=\&quot;ml-auto\&quot;&gt;21&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 font-semibold text-white hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;ml-auto flex h-6 w-6 items-center justify-center rounded-full bg-gray-900\&quot;&gt;22&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;2 events&lt;\/p&gt;\n &lt;div class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot; class=\&quot;ml-auto\&quot;&gt;23&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot; class=\&quot;ml-auto\&quot;&gt;24&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot; class=\&quot;ml-auto\&quot;&gt;25&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot; class=\&quot;ml-auto\&quot;&gt;26&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot; class=\&quot;ml-auto\&quot;&gt;27&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot; class=\&quot;ml-auto\&quot;&gt;28&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot; class=\&quot;ml-auto\&quot;&gt;29&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot; class=\&quot;ml-auto\&quot;&gt;30&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;ml-auto\&quot;&gt;31&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;ml-auto\&quot;&gt;1&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;ml-auto\&quot;&gt;2&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;ml-auto\&quot;&gt;3&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;ml-auto\&quot;&gt;4&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;1 event&lt;\/p&gt;\n &lt;div class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;ml-auto\&quot;&gt;5&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;ml-auto\&quot;&gt;6&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;0 events&lt;\/p&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-10 px-4 sm:px-6 lg:hidden\&quot;&gt;\n &lt;ol class=\&quot;divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;li class=\&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50\&quot;&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;p class=\&quot;font-semibold text-gray-900\&quot;&gt;Maple syrup museum&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-15T09:00\&quot; class=\&quot;mt-2 flex items-center text-gray-700\&quot;&gt;\n &lt;!-- Heroicon name: solid\/clock --&gt;\n &lt;svg class=\&quot;mr-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n 3PM\n &lt;\/time&gt;\n &lt;\/div&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100\&quot;&gt;Edit&lt;span class=\&quot;sr-only\&quot;&gt;, Maple syrup museum&lt;\/span&gt;&lt;\/a&gt;\n &lt;\/li&gt;\n\n &lt;li class=\&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50\&quot;&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;p class=\&quot;font-semibold text-gray-900\&quot;&gt;Hockey game&lt;\/p&gt;\n &lt;time datetime=\&quot;2022-01-22T19:00\&quot; class=\&quot;mt-2 flex items-center text-gray-700\&quot;&gt;\n &lt;!-- Heroicon name: solid\/clock --&gt;\n &lt;svg class=\&quot;mr-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n 7PM\n &lt;\/time&gt;\n &lt;\/div&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100\&quot;&gt;Edit&lt;span class=\&quot;sr-only\&quot;&gt;, Hockey game&lt;\/span&gt;&lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment } from &#039;react&#039;\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClockIcon,\n DotsHorizontalIcon,\n} from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\n\nconst days = [\n { date: &#039;2021-12-27&#039;, events: [] },\n { date: &#039;2021-12-28&#039;, events: [] },\n { date: &#039;2021-12-29&#039;, events: [] },\n { date: &#039;2021-12-30&#039;, events: [] },\n { date: &#039;2021-12-31&#039;, events: [] },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-03&#039;,\n isCurrentMonth: true,\n events: [\n { id: 1, name: &#039;Design review&#039;, time: &#039;10AM&#039;, datetime: &#039;2022-01-03T10:00&#039;, href: &#039;#&#039; },\n { id: 2, name: &#039;Sales meeting&#039;, time: &#039;2PM&#039;, datetime: &#039;2022-01-03T14:00&#039;, href: &#039;#&#039; },\n ],\n },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-07&#039;,\n isCurrentMonth: true,\n events: [{ id: 3, name: &#039;Date night&#039;, time: &#039;6PM&#039;, datetime: &#039;2022-01-08T18:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-12&#039;,\n isCurrentMonth: true,\n isToday: true,\n events: [{ id: 6, name: \&quot;Sam&#039;s birthday party\&quot;, time: &#039;2PM&#039;, datetime: &#039;2022-01-25T14:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-22&#039;,\n isCurrentMonth: true,\n isSelected: true,\n events: [\n { id: 4, name: &#039;Maple syrup museum&#039;, time: &#039;3PM&#039;, datetime: &#039;2022-01-22T15:00&#039;, href: &#039;#&#039; },\n { id: 5, name: &#039;Hockey game&#039;, time: &#039;7PM&#039;, datetime: &#039;2022-01-22T19:00&#039;, href: &#039;#&#039; },\n ],\n },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-02-01&#039;, events: [] },\n { date: &#039;2022-02-02&#039;, events: [] },\n {\n date: &#039;2022-02-03&#039;,\n events: [{ id: 7, name: &#039;Cinema with friends&#039;, time: &#039;9PM&#039;, datetime: &#039;2022-02-04T21:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-02-04&#039;, events: [] },\n { date: &#039;2022-02-05&#039;, events: [] },\n { date: &#039;2022-02-06&#039;, events: [] },\n]\nconst selectedDay = days.find((day) =&gt; day.isSelected)\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n return (\n &lt;div className=\&quot;lg:flex lg:h-full lg:flex-col\&quot;&gt;\n &lt;header className=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6 lg:flex-none\&quot;&gt;\n &lt;h1 className=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div className=\&quot;flex items-center\&quot;&gt;\n &lt;div className=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;\n &gt;\n Today\n &lt;\/button&gt;\n &lt;span className=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative\&quot;&gt;\n &lt;Menu.Button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;\n &gt;\n Month view\n &lt;ChevronDownIcon className=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;div className=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;\n &gt;\n Add event\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;Menu.Button className=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Create event\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Go to today\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div className=\&quot;shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col\&quot;&gt;\n &lt;div className=\&quot;grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none\&quot;&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n M&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;on&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n T&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;ue&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n W&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;ed&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n T&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;hu&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n F&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;ri&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n S&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;at&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;bg-white py-2\&quot;&gt;\n S&lt;span className=\&quot;sr-only sm:not-sr-only\&quot;&gt;un&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto\&quot;&gt;\n &lt;div className=\&quot;hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px\&quot;&gt;\n {days.map((day) =&gt; (\n &lt;div\n key={day.date}\n className={classNames(\n day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50 text-gray-500&#039;,\n &#039;relative py-2 px-3&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={\n day.isToday\n ? &#039;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&#039;\n : undefined\n }\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n {day.events.length &gt; 0 &amp;&amp; (\n &lt;ol className=\&quot;mt-2\&quot;&gt;\n {day.events.slice(0, 2).map((event) =&gt; (\n &lt;li key={event.id}&gt;\n &lt;a href={event.href} className=\&quot;group flex\&quot;&gt;\n &lt;p className=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;\n {event.name}\n &lt;\/p&gt;\n &lt;time\n dateTime={event.datetime}\n className=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;\n &gt;\n {event.time}\n &lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n ))}\n {day.events.length &gt; 2 &amp;&amp; &lt;li className=\&quot;text-gray-500\&quot;&gt;+ {day.events.length - 2} more&lt;\/li&gt;}\n &lt;\/ol&gt;\n )}\n &lt;\/div&gt;\n ))}\n &lt;\/div&gt;\n &lt;div className=\&quot;isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden\&quot;&gt;\n {days.map((day) =&gt; (\n &lt;button\n key={day.date}\n type=\&quot;button\&quot;\n className={classNames(\n day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;,\n (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;,\n day.isSelected &amp;&amp; &#039;text-white&#039;,\n !day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;text-indigo-600&#039;,\n !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;,\n !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-500&#039;,\n &#039;flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={classNames(\n day.isSelected &amp;&amp; &#039;flex h-6 w-6 items-center justify-center rounded-full&#039;,\n day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;,\n day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;,\n &#039;ml-auto&#039;\n )}\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n &lt;p className=\&quot;sr-only\&quot;&gt;{day.events.length} events&lt;\/p&gt;\n {day.events.length &gt; 0 &amp;&amp; (\n &lt;div className=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n {day.events.map((event) =&gt; (\n &lt;div key={event.id} className=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot; \/&gt;\n ))}\n &lt;\/div&gt;\n )}\n &lt;\/button&gt;\n ))}\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n {selectedDay?.events.length &gt; 0 &amp;&amp; (\n &lt;div className=\&quot;py-10 px-4 sm:px-6 lg:hidden\&quot;&gt;\n &lt;ol className=\&quot;divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5\&quot;&gt;\n {selectedDay.events.map((event) =&gt; (\n &lt;li key={event.id} className=\&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50\&quot;&gt;\n &lt;div className=\&quot;flex-auto\&quot;&gt;\n &lt;p className=\&quot;font-semibold text-gray-900\&quot;&gt;{event.name}&lt;\/p&gt;\n &lt;time dateTime={event.datetime} className=\&quot;mt-2 flex items-center text-gray-700\&quot;&gt;\n &lt;ClockIcon className=\&quot;mr-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n {event.time}\n &lt;\/time&gt;\n &lt;\/div&gt;\n &lt;a\n href={event.href}\n className=\&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100\&quot;\n &gt;\n Edit&lt;span className=\&quot;sr-only\&quot;&gt;, {event.name}&lt;\/span&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n ))}\n &lt;\/ol&gt;\n &lt;\/div&gt;\n )}\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div class=\&quot;lg:flex lg:h-full lg:flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6 lg:flex-none\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative\&quot;&gt;\n &lt;MenuButton type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;&gt;\n Month view\n &lt;ChevronDownIcon class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;MenuButton class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col\&quot;&gt;\n &lt;div class=\&quot;grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none\&quot;&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;M&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;on&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;T&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ue&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;W&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ed&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;T&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;hu&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;F&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;ri&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;S&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;at&lt;\/span&gt;&lt;\/div&gt;\n &lt;div class=\&quot;bg-white py-2\&quot;&gt;S&lt;span class=\&quot;sr-only sm:not-sr-only\&quot;&gt;un&lt;\/span&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto\&quot;&gt;\n &lt;div class=\&quot;hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px\&quot;&gt;\n &lt;div v-for=\&quot;day in days\&quot; :key=\&quot;day.date\&quot; :class=\&quot;[day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50 text-gray-500&#039;, &#039;relative py-2 px-3&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;day.isToday ? &#039;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&#039; : undefined\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;ol v-if=\&quot;day.events.length &gt; 0\&quot; class=\&quot;mt-2\&quot;&gt;\n &lt;li v-for=\&quot;event in day.events.slice(0, 2)\&quot; :key=\&quot;event.id\&quot;&gt;\n &lt;a :href=\&quot;event.href\&quot; class=\&quot;group flex\&quot;&gt;\n &lt;p class=\&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600\&quot;&gt;\n {{ event.name }}\n &lt;\/p&gt;\n &lt;time :datetime=\&quot;event.datetime\&quot; class=\&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block\&quot;&gt;{{ event.time }}&lt;\/time&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li v-if=\&quot;day.events.length &gt; 2\&quot; class=\&quot;text-gray-500\&quot;&gt;+ {{ day.events.length - 2 }} more&lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden\&quot;&gt;\n &lt;button v-for=\&quot;day in days\&quot; :key=\&quot;day.date\&quot; type=\&quot;button\&quot; :class=\&quot;[day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;, (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;, day.isSelected &amp;&amp; &#039;text-white&#039;, !day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;text-indigo-600&#039;, !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;, !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-500&#039;, &#039;flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;[day.isSelected &amp;&amp; &#039;flex h-6 w-6 items-center justify-center rounded-full&#039;, day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;, day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;, &#039;ml-auto&#039;]\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;p class=\&quot;sr-only\&quot;&gt;{{ day.events.length }} events&lt;\/p&gt;\n &lt;div v-if=\&quot;day.events.length &gt; 0\&quot; class=\&quot;-mx-0.5 mt-auto flex flex-wrap-reverse\&quot;&gt;\n &lt;div v-for=\&quot;event in day.events\&quot; :key=\&quot;event.id\&quot; class=\&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400\&quot; \/&gt;\n &lt;\/div&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div v-if=\&quot;selectedDay?.events.length &gt; 0\&quot; class=\&quot;py-10 px-4 sm:px-6 lg:hidden\&quot;&gt;\n &lt;ol class=\&quot;divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;li v-for=\&quot;event in selectedDay.events\&quot; :key=\&quot;event.id\&quot; class=\&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50\&quot;&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;p class=\&quot;font-semibold text-gray-900\&quot;&gt;{{ event.name }}&lt;\/p&gt;\n &lt;time :datetime=\&quot;event.datetime\&quot; class=\&quot;mt-2 flex items-center text-gray-700\&quot;&gt;\n &lt;ClockIcon class=\&quot;mr-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n {{ event.time }}\n &lt;\/time&gt;\n &lt;\/div&gt;\n &lt;a :href=\&quot;event.href\&quot; class=\&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100\&quot;\n &gt;Edit&lt;span class=\&quot;sr-only\&quot;&gt;, {{ event.name }}&lt;\/span&gt;&lt;\/a\n &gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, DotsHorizontalIcon } from &#039;@heroicons\/vue\/solid&#039;\nimport { Menu, MenuButton, MenuItem, MenuItems } from &#039;@headlessui\/vue&#039;\n\nconst days = [\n { date: &#039;2021-12-27&#039;, events: [] },\n { date: &#039;2021-12-28&#039;, events: [] },\n { date: &#039;2021-12-29&#039;, events: [] },\n { date: &#039;2021-12-30&#039;, events: [] },\n { date: &#039;2021-12-31&#039;, events: [] },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-03&#039;,\n isCurrentMonth: true,\n events: [\n { id: 1, name: &#039;Design review&#039;, time: &#039;10AM&#039;, datetime: &#039;2022-01-03T10:00&#039;, href: &#039;#&#039; },\n { id: 2, name: &#039;Sales meeting&#039;, time: &#039;2PM&#039;, datetime: &#039;2022-01-03T14:00&#039;, href: &#039;#&#039; },\n ],\n },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-07&#039;,\n isCurrentMonth: true,\n events: [{ id: 3, name: &#039;Date night&#039;, time: &#039;6PM&#039;, datetime: &#039;2022-01-08T18:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-12&#039;,\n isCurrentMonth: true,\n isToday: true,\n events: [{ id: 6, name: \&quot;Sam&#039;s birthday party\&quot;, time: &#039;2PM&#039;, datetime: &#039;2022-01-25T14:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true, events: [] },\n {\n date: &#039;2022-01-22&#039;,\n isCurrentMonth: true,\n isSelected: true,\n events: [\n { id: 4, name: &#039;Maple syrup museum&#039;, time: &#039;3PM&#039;, datetime: &#039;2022-01-22T15:00&#039;, href: &#039;#&#039; },\n { id: 5, name: &#039;Hockey game&#039;, time: &#039;7PM&#039;, datetime: &#039;2022-01-22T19:00&#039;, href: &#039;#&#039; },\n ],\n },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true, events: [] },\n { date: &#039;2022-02-01&#039;, events: [] },\n { date: &#039;2022-02-02&#039;, events: [] },\n {\n date: &#039;2022-02-03&#039;,\n events: [{ id: 7, name: &#039;Cinema with friends&#039;, time: &#039;9PM&#039;, datetime: &#039;2022-02-04T21:00&#039;, href: &#039;#&#039; }],\n },\n { date: &#039;2022-02-04&#039;, events: [] },\n { date: &#039;2022-02-05&#039;, events: [] },\n { date: &#039;2022-02-06&#039;, events: [] },\n]\nconst selectedDay = days.find((day) =&gt; day.isSelected)\n\nexport default {\n components: {\n Menu,\n MenuButton,\n MenuItem,\n MenuItems,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClockIcon,\n DotsHorizontalIcon,\n },\n setup() {\n return {\n days,\n selectedDay,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-c29139529079ea762f118812bbeaeb9e" class="font-medium text-gray-900 truncate">
<a href="#component-c29139529079ea762f118812bbeaeb9e" class="mr-1">Month view</a>
</h2>
<span class="hidden lg:block flex-none uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1 rounded-md ml-3">
Requires <abbr title="JavaScript">JS</abbr>
</span>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-c29139529079ea762f118812bbeaeb9e {
height: 694px;
}
@media (min-width: 704px) {
#frame-c29139529079ea762f118812bbeaeb9e {
height: 768px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-c29139529079ea762f118812bbeaeb9e" class="bg-white">
<iframe x-ref="iframe" title="Month view preview" aria-label="Month view preview" name="frame-c29139529079ea762f118812bbeaeb9e" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/components-v2.js?id=c08ed7087921a2a8b1bfe052e9ed5b36&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;script src=&quot;/js/alpine.js?id=aec657470ad97cbba5c2659fd719c2de&quot; defer&gt;&lt;/script&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;div class=&quot;&quot; style=&quot;&quot;&gt;
&lt;div class=&quot;bg-gray-50 lg:h-0 lg:min-h-[768px]&quot;&gt;
&lt;div class=&quot;lg:flex lg:h-full lg:flex-col&quot;&gt;
&lt;header class=&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6 lg:flex-none&quot;&gt;
&lt;h1 class=&quot;text-lg font-semibold text-gray-900&quot;&gt;
&lt;time datetime=&quot;2022-01&quot;&gt;January 2022&lt;/time&gt;
&lt;/h1&gt;
&lt;div class=&quot;flex items-center&quot;&gt;
&lt;div class=&quot;flex items-center rounded-md shadow-sm md:items-stretch&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Previous month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-left&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block&quot;&gt;Today&lt;/button&gt;
&lt;span class=&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden&quot;&gt;&lt;/span&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Next month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-right&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;hidden md:ml-4 md:flex md:items-center&quot;&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;relative&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50&quot; id=&quot;menu-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
Month view
&lt;svg class=&quot;ml-2 h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/chevron-down&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Day view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Week view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 2, &#039;text-gray-700&#039;: !(activeIndex === 2) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-2&quot; @mouseenter=&quot;activeIndex = 2&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Month view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 3, &#039;text-gray-700&#039;: !(activeIndex === 3) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-3&quot; @mouseenter=&quot;activeIndex = 3&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Year view&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;ml-6 h-6 w-px bg-gray-300&quot;&gt;&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2&quot;&gt;Add event&lt;/button&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;relative ml-6 md:hidden&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500&quot; id=&quot;menu-0-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open menu&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-0-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Create event&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Go to today&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 2, &#039;text-gray-700&#039;: !(activeIndex === 2) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-2&quot; @mouseenter=&quot;activeIndex = 2&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Day view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 3, &#039;text-gray-700&#039;: !(activeIndex === 3) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-3&quot; @mouseenter=&quot;activeIndex = 3&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Week view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 4, &#039;text-gray-700&#039;: !(activeIndex === 4) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-4&quot; @mouseenter=&quot;activeIndex = 4&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Month view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 5, &#039;text-gray-700&#039;: !(activeIndex === 5) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-5&quot; @mouseenter=&quot;activeIndex = 5&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Year view&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col&quot;&gt;
&lt;div class=&quot;grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none&quot;&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;M&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;on&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;T&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;ue&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;W&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;ed&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;T&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;hu&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;F&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;ri&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;S&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;at&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;bg-white py-2&quot;&gt;S&lt;span class=&quot;sr-only sm:not-sr-only&quot;&gt;un&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto&quot;&gt;
&lt;div class=&quot;hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px&quot;&gt;
&lt;!--
Always include: &quot;relative py-2 px-3&quot;
Is current month, include: &quot;bg-white&quot;
Is not current month, include: &quot;bg-gray-50 text-gray-500&quot;
--&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;!--
Is today, include: &quot;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;
--&gt;
&lt;time datetime=&quot;2021-12-27&quot;&gt;27&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2021-12-28&quot;&gt;28&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2021-12-29&quot;&gt;29&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2021-12-30&quot;&gt;30&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2021-12-31&quot;&gt;31&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot;&gt;1&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot;&gt;2&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-03&quot;&gt;3&lt;/time&gt;
&lt;ol class=&quot;mt-2&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Design review&lt;/p&gt;
&lt;time datetime=&quot;2022-01-03T10:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;10AM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Sales meeting&lt;/p&gt;
&lt;time datetime=&quot;2022-01-03T14:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;2PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-04&quot;&gt;4&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-05&quot;&gt;5&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-06&quot;&gt;6&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-07&quot;&gt;7&lt;/time&gt;
&lt;ol class=&quot;mt-2&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Date night&lt;/p&gt;
&lt;time datetime=&quot;2022-01-08T18:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;6PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-08&quot;&gt;8&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-09&quot;&gt;9&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-10&quot;&gt;10&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-11&quot;&gt;11&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-12&quot; class=&quot;flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;&gt;12&lt;/time&gt;
&lt;ol class=&quot;mt-2&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Sam&#039;s birthday party&lt;/p&gt;
&lt;time datetime=&quot;2022-01-25T14:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;2PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-13&quot;&gt;13&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-14&quot;&gt;14&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-15&quot;&gt;15&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-16&quot;&gt;16&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot;&gt;17&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot;&gt;18&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot;&gt;19&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot;&gt;20&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-21&quot;&gt;21&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-22&quot;&gt;22&lt;/time&gt;
&lt;ol class=&quot;mt-2&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Maple syrup museum&lt;/p&gt;
&lt;time datetime=&quot;2022-01-22T15:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;3PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Hockey game&lt;/p&gt;
&lt;time datetime=&quot;2022-01-22T19:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;7PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-23&quot;&gt;23&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-24&quot;&gt;24&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-25&quot;&gt;25&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-26&quot;&gt;26&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-27&quot;&gt;27&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-28&quot;&gt;28&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-29&quot;&gt;29&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-30&quot;&gt;30&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-white py-2 px-3&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot;&gt;31&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot;&gt;1&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot;&gt;2&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot;&gt;3&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot;&gt;4&lt;/time&gt;
&lt;ol class=&quot;mt-2&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; class=&quot;group flex&quot;&gt;
&lt;p class=&quot;flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600&quot;&gt;Cinema with friends&lt;/p&gt;
&lt;time datetime=&quot;2022-02-04T21:00&quot; class=&quot;ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block&quot;&gt;9PM&lt;/time&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot;&gt;5&lt;/time&gt;
&lt;/div&gt;
&lt;div class=&quot;relative bg-gray-50 py-2 px-3 text-gray-500&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot;&gt;6&lt;/time&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden&quot;&gt;
&lt;!--
Always include: &quot;flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10&quot;
Is current month, include: &quot;bg-white&quot;
Is not current month, include: &quot;bg-gray-50&quot;
Is selected or is today, include: &quot;font-semibold&quot;
Is selected, include: &quot;text-white&quot;
Is not selected and is today, include: &quot;text-indigo-600&quot;
Is not selected and is current month, and is not today, include: &quot;text-gray-900&quot;
Is not selected, is not current month, and is not today: &quot;text-gray-500&quot;
--&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;!--
Always include: &quot;ml-auto&quot;
Is selected, include: &quot;flex h-6 w-6 items-center justify-center rounded-full&quot;
Is selected and is today, include: &quot;bg-indigo-600&quot;
Is selected and is not today, include: &quot;bg-gray-900&quot;
--&gt;
&lt;time datetime=&quot;2021-12-27&quot; class=&quot;ml-auto&quot;&gt;27&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-28&quot; class=&quot;ml-auto&quot;&gt;28&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-29&quot; class=&quot;ml-auto&quot;&gt;29&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-30&quot; class=&quot;ml-auto&quot;&gt;30&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-31&quot; class=&quot;ml-auto&quot;&gt;31&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot; class=&quot;ml-auto&quot;&gt;1&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-02&quot; class=&quot;ml-auto&quot;&gt;2&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-03&quot; class=&quot;ml-auto&quot;&gt;3&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;2 events&lt;/p&gt;
&lt;div class=&quot;-mx-0.5 mt-auto flex flex-wrap-reverse&quot;&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-04&quot; class=&quot;ml-auto&quot;&gt;4&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-05&quot; class=&quot;ml-auto&quot;&gt;5&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-06&quot; class=&quot;ml-auto&quot;&gt;6&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-07&quot; class=&quot;ml-auto&quot;&gt;7&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;1 event&lt;/p&gt;
&lt;div class=&quot;-mx-0.5 mt-auto flex flex-wrap-reverse&quot;&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-08&quot; class=&quot;ml-auto&quot;&gt;8&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-09&quot; class=&quot;ml-auto&quot;&gt;9&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-10&quot; class=&quot;ml-auto&quot;&gt;10&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-11&quot; class=&quot;ml-auto&quot;&gt;11&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-12&quot; class=&quot;ml-auto&quot;&gt;12&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;1 event&lt;/p&gt;
&lt;div class=&quot;-mx-0.5 mt-auto flex flex-wrap-reverse&quot;&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-13&quot; class=&quot;ml-auto&quot;&gt;13&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-14&quot; class=&quot;ml-auto&quot;&gt;14&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-15&quot; class=&quot;ml-auto&quot;&gt;15&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-16&quot; class=&quot;ml-auto&quot;&gt;16&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot; class=&quot;ml-auto&quot;&gt;17&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot; class=&quot;ml-auto&quot;&gt;18&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot; class=&quot;ml-auto&quot;&gt;19&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot; class=&quot;ml-auto&quot;&gt;20&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-21&quot; class=&quot;ml-auto&quot;&gt;21&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 font-semibold text-white hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-22&quot; class=&quot;ml-auto flex h-6 w-6 items-center justify-center rounded-full bg-gray-900&quot;&gt;22&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;2 events&lt;/p&gt;
&lt;div class=&quot;-mx-0.5 mt-auto flex flex-wrap-reverse&quot;&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-23&quot; class=&quot;ml-auto&quot;&gt;23&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-24&quot; class=&quot;ml-auto&quot;&gt;24&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-25&quot; class=&quot;ml-auto&quot;&gt;25&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-26&quot; class=&quot;ml-auto&quot;&gt;26&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-27&quot; class=&quot;ml-auto&quot;&gt;27&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-28&quot; class=&quot;ml-auto&quot;&gt;28&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-29&quot; class=&quot;ml-auto&quot;&gt;29&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-30&quot; class=&quot;ml-auto&quot;&gt;30&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;ml-auto&quot;&gt;31&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;ml-auto&quot;&gt;1&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;ml-auto&quot;&gt;2&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;ml-auto&quot;&gt;3&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;ml-auto&quot;&gt;4&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;1 event&lt;/p&gt;
&lt;div class=&quot;-mx-0.5 mt-auto flex flex-wrap-reverse&quot;&gt;
&lt;div class=&quot;mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;ml-auto&quot;&gt;5&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;ml-auto&quot;&gt;6&lt;/time&gt;
&lt;p class=&quot;sr-only&quot;&gt;0 events&lt;/p&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;py-10 px-4 sm:px-6 lg:hidden&quot;&gt;
&lt;ol class=&quot;divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5&quot;&gt;
&lt;li class=&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;p class=&quot;font-semibold text-gray-900&quot;&gt;Maple syrup museum&lt;/p&gt;
&lt;time datetime=&quot;2022-01-15T09:00&quot; class=&quot;mt-2 flex items-center text-gray-700&quot;&gt;
&lt;svg class=&quot;mr-2 h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/clock&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
3PM
&lt;/time&gt;
&lt;/div&gt;
&lt;a href=&quot;#&quot; class=&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100&quot;&gt;Edit&lt;span class=&quot;sr-only&quot;&gt;, Maple syrup museum&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50&quot;&gt;
&lt;div class=&quot;flex-auto&quot;&gt;
&lt;p class=&quot;font-semibold text-gray-900&quot;&gt;Hockey game&lt;/p&gt;
&lt;time datetime=&quot;2022-01-22T19:00&quot; class=&quot;mt-2 flex items-center text-gray-700&quot;&gt;
&lt;svg class=&quot;mr-2 h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/clock&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
7PM
&lt;/time&gt;
&lt;/div&gt;
&lt;a href=&quot;#&quot; class=&quot;ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100&quot;&gt;Edit&lt;span class=&quot;sr-only&quot;&gt;, Hockey game&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-89f285aeebb60ddecb7ec8b5e664d525"
id="component-89f285aeebb60ddecb7ec8b5e664d525"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div class=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-40 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot;&gt;&lt;\/span&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;div class=\&quot;relative\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot; id=\&quot;menu-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n Week view\n &lt;!-- Heroicon name: solid\/chevron-down --&gt;\n &lt;svg class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-0\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-1\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-2\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-3\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot;&gt;&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/dots-horizontal --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path d=\&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-2\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-3\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-4\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-5\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;flex flex-auto flex-col overflow-auto bg-white\&quot;&gt;\n &lt;div style=\&quot;width: 165%\&quot; class=\&quot;flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full\&quot;&gt;\n &lt;div class=\&quot;sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8\&quot;&gt;\n &lt;div class=\&quot;grid grid-cols-7 text-sm leading-6 text-gray-500 sm:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;M &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;T &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;W &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;T &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;F &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;S &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;&lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;S &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;&lt;\/button&gt;\n &lt;\/div&gt;\n\n &lt;div class=\&quot;-mr-px hidden grid-cols-7 divide-x divide-gray-100 border-r border-gray-100 text-sm leading-6 text-gray-500 sm:grid\&quot;&gt;\n &lt;div class=\&quot;col-end-1 w-14\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Mon &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Tue &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span class=\&quot;flex items-baseline\&quot;&gt;Wed &lt;span class=\&quot;ml-1.5 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Thu &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Fri &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Sat &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Sun &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex flex-auto\&quot;&gt;\n &lt;div class=\&quot;sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n &lt;!-- Horizontal lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot; style=\&quot;grid-template-rows: repeat(48, minmax(3.5rem, 1fr))\&quot;&gt;\n &lt;div class=\&quot;row-end-1 h-7\&quot;&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n\n &lt;!-- Vertical lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-gray-100 sm:grid sm:grid-cols-7\&quot;&gt;\n &lt;div class=\&quot;col-start-1 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-2 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-3 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-4 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-5 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-6 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-7 row-span-full\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;col-start-8 row-span-full w-8\&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n\n &lt;!-- Events --&gt;\n &lt;ol class=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:grid-cols-7 sm:pr-8\&quot; style=\&quot;grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto\&quot;&gt;\n &lt;li class=\&quot;relative mt-px flex sm:col-start-3\&quot; style=\&quot;grid-row: 74 \/ span 12\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p class=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-12T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex sm:col-start-3\&quot; style=\&quot;grid-row: 92 \/ span 30\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p class=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-12T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px hidden sm:col-start-6 sm:flex\&quot; style=\&quot;grid-row: 122 \/ span 24\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-gray-700\&quot;&gt;Meeting with design team at Disney&lt;\/p&gt;\n &lt;p class=\&quot;text-gray-500 group-hover:text-gray-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-15T10:00\&quot;&gt;10:00 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment, useEffect, useRef } from &#039;react&#039;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n const container = useRef(null)\n const containerNav = useRef(null)\n const containerOffset = useRef(null)\n\n useEffect(() =&gt; {\n \/\/ Set the container scroll position based on the current time.\n const currentMinute = new Date().getHours() * 60\n container.current.scrollTop =\n ((container.current.scrollHeight - containerNav.current.offsetHeight - containerOffset.current.offsetHeight) *\n currentMinute) \/\n 1440\n }, [])\n\n return (\n &lt;div className=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header className=\&quot;relative z-40 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 className=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div className=\&quot;flex items-center\&quot;&gt;\n &lt;div className=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;\n &gt;\n Today\n &lt;\/button&gt;\n &lt;span className=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative\&quot;&gt;\n &lt;Menu.Button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;\n &gt;\n Week view\n &lt;ChevronDownIcon className=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;div className=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;\n &gt;\n Add event\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;Menu.Button className=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Create event\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Go to today\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div ref={container} className=\&quot;flex flex-auto flex-col overflow-auto bg-white\&quot;&gt;\n &lt;div style={{ width: &#039;165%&#039; }} className=\&quot;flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full\&quot;&gt;\n &lt;div\n ref={containerNav}\n className=\&quot;sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8\&quot;\n &gt;\n &lt;div className=\&quot;grid grid-cols-7 text-sm leading-6 text-gray-500 sm:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n M &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n T &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n W{&#039; &#039;}\n &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;\n 12\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n T &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n F &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n S &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n S &lt;span className=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n\n &lt;div className=\&quot;-mr-px hidden grid-cols-7 divide-x divide-gray-100 border-r border-gray-100 text-sm leading-6 text-gray-500 sm:grid\&quot;&gt;\n &lt;div className=\&quot;col-end-1 w-14\&quot; \/&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Mon &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Tue &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span className=\&quot;flex items-baseline\&quot;&gt;\n Wed{&#039; &#039;}\n &lt;span className=\&quot;ml-1.5 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;\n 12\n &lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Thu &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Fri &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Sat &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;\n Sun &lt;span className=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;\n &lt;\/span&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex flex-auto\&quot;&gt;\n &lt;div className=\&quot;sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100\&quot; \/&gt;\n &lt;div className=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n {\/* Horizontal lines *\/}\n &lt;div\n className=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot;\n style={{ gridTemplateRows: &#039;repeat(48, minmax(3.5rem, 1fr))&#039; }}\n &gt;\n &lt;div ref={containerOffset} className=\&quot;row-end-1 h-7\&quot;&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 12AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 1AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 2AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 3AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 4AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 5AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 6AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 7AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 8AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 9AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 10AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 11AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 12PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 1PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 2PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 3PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 4PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 5PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 6PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 7PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 8PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 9PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 10PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 11PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;\/div&gt;\n\n {\/* Vertical lines *\/}\n &lt;div className=\&quot;col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-gray-100 sm:grid sm:grid-cols-7\&quot;&gt;\n &lt;div className=\&quot;col-start-1 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-2 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-3 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-4 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-5 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-6 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-7 row-span-full\&quot; \/&gt;\n &lt;div className=\&quot;col-start-8 row-span-full w-8\&quot; \/&gt;\n &lt;\/div&gt;\n\n {\/* Events *\/}\n &lt;ol\n className=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:grid-cols-7 sm:pr-8\&quot;\n style={{ gridTemplateRows: &#039;1.75rem repeat(288, minmax(0, 1fr)) auto&#039; }}\n &gt;\n &lt;li className=\&quot;relative mt-px flex sm:col-start-3\&quot; style={{ gridRow: &#039;74 \/ span 12&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p className=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-12T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;relative mt-px flex sm:col-start-3\&quot; style={{ gridRow: &#039;92 \/ span 30&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p className=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-12T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;relative mt-px hidden sm:col-start-6 sm:flex\&quot; style={{ gridRow: &#039;122 \/ span 24&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-gray-700\&quot;&gt;Meeting with design team at Disney&lt;\/p&gt;\n &lt;p className=\&quot;text-gray-500 group-hover:text-gray-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-15T10:00\&quot;&gt;10:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div class=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-40 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01\&quot;&gt;January 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative\&quot;&gt;\n &lt;MenuButton type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;&gt;\n Week view\n &lt;ChevronDownIcon class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;MenuButton class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div ref=\&quot;container\&quot; class=\&quot;flex flex-auto flex-col overflow-auto bg-white\&quot;&gt;\n &lt;div style=\&quot;width: 165%\&quot; class=\&quot;flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full\&quot;&gt;\n &lt;div ref=\&quot;containerNav\&quot; class=\&quot;sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8\&quot;&gt;\n &lt;div class=\&quot;grid grid-cols-7 text-sm leading-6 text-gray-500 sm:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n M\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n T\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n W\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n T\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n F\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n S\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-2 pb-3\&quot;&gt;\n S\n &lt;span class=\&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n\n &lt;div class=\&quot;-mr-px hidden grid-cols-7 divide-x divide-gray-100 border-r border-gray-100 text-sm leading-6 text-gray-500 sm:grid\&quot;&gt;\n &lt;div class=\&quot;col-end-1 w-14\&quot; \/&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Mon &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;10&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Tue &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;11&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span class=\&quot;flex items-baseline\&quot;&gt;Wed &lt;span class=\&quot;ml-1.5 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Thu &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;13&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Fri &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;14&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Sat &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;15&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center justify-center py-3\&quot;&gt;\n &lt;span&gt;Sun &lt;span class=\&quot;items-center justify-center font-semibold text-gray-900\&quot;&gt;16&lt;\/span&gt;&lt;\/span&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex flex-auto\&quot;&gt;\n &lt;div class=\&quot;sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100\&quot; \/&gt;\n &lt;div class=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n &lt;!-- Horizontal lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot; style=\&quot;grid-template-rows: repeat(48, minmax(3.5rem, 1fr))\&quot;&gt;\n &lt;div ref=\&quot;containerOffset\&quot; class=\&quot;row-end-1 h-7\&quot; \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;\/div&gt;\n\n &lt;!-- Vertical lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-gray-100 sm:grid sm:grid-cols-7\&quot;&gt;\n &lt;div class=\&quot;col-start-1 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-2 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-3 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-4 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-5 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-6 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-7 row-span-full\&quot; \/&gt;\n &lt;div class=\&quot;col-start-8 row-span-full w-8\&quot; \/&gt;\n &lt;\/div&gt;\n\n &lt;!-- Events --&gt;\n &lt;ol class=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:grid-cols-7 sm:pr-8\&quot; style=\&quot;grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto\&quot;&gt;\n &lt;li class=\&quot;relative mt-px flex sm:col-start-3\&quot; style=\&quot;grid-row: 74 \/ span 12\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p class=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex sm:col-start-3\&quot; style=\&quot;grid-row: 92 \/ span 30\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p class=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px hidden sm:col-start-6 sm:flex\&quot; style=\&quot;grid-row: 122 \/ span 24\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-gray-700\&quot;&gt;Meeting with design team at Disney&lt;\/p&gt;\n &lt;p class=\&quot;text-gray-500 group-hover:text-gray-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15T10:00\&quot;&gt;10:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ref, onMounted } from &#039;vue&#039;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/vue\/solid&#039;\nimport { Menu, MenuButton, MenuItem, MenuItems } from &#039;@headlessui\/vue&#039;\n\nexport default {\n components: {\n Menu,\n MenuButton,\n MenuItem,\n MenuItems,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n },\n setup() {\n const container = ref(null)\n const containerNav = ref(null)\n const containerOffset = ref(null)\n\n onMounted(() =&gt; {\n \/\/ Set the container scroll position based on the current time.\n const currentMinute = new Date().getHours() * 60\n container.value.scrollTop =\n ((container.value.scrollHeight - containerNav.value.offsetHeight - containerOffset.value.offsetHeight) *\n currentMinute) \/\n 1440\n })\n\n return {\n container,\n containerNav,\n containerOffset,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-89f285aeebb60ddecb7ec8b5e664d525" class="font-medium text-gray-900 truncate">
<a href="#component-89f285aeebb60ddecb7ec8b5e664d525" class="mr-1">Week view</a>
</h2>
<span class="hidden lg:block flex-none uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1 rounded-md ml-3">
Requires <abbr title="JavaScript">JS</abbr>
</span>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-89f285aeebb60ddecb7ec8b5e664d525 {
height: 768px;
}
@media (min-width: 704px) {
#frame-89f285aeebb60ddecb7ec8b5e664d525 {
height: 768px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-89f285aeebb60ddecb7ec8b5e664d525" class="bg-white">
<iframe x-ref="iframe" title="Week view preview" aria-label="Week view preview" name="frame-89f285aeebb60ddecb7ec8b5e664d525" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;style&gt;#app { display: contents }&lt;/style&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;script src=&quot;https://unpkg.com/[email protected]/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;https://unpkg.com/[email protected]/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/headlessui.js?id=5db182743a58aebdec7d6c085413e7c0&quot;&gt;&lt;/script&gt;&lt;script&gt;(()=&gt;{var V=Object.create;var d=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=r=&gt;d(r,&quot;__esModule&quot;,{value:!0});var f=(r,n)=&gt;()=&gt;(n||r((n={exports:{}}).exports,n),n.exports);var L=(r,n,m,l)=&gt;{if(n&amp;&amp;typeof n==&quot;object&quot;||typeof n==&quot;function&quot;)for(let i of j(n))!y.call(r,i)&amp;&amp;(m||i!==&quot;default&quot;)&amp;&amp;d(r,i,{get:()=&gt;n[i],enumerable:!(l=B(n,i))||l.enumerable});return r},e=(r,n)=&gt;L(A(d(r!=null?V(O(r)):{},&quot;default&quot;,!n&amp;&amp;r&amp;&amp;r.__esModule?{get:()=&gt;r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var t=f((Kt,z)=&gt;{z.exports=window.React});var M=f((Jt,E)=&gt;{E.exports=window.ReactDOM});var b=f((Pd,I)=&gt;{I.exports=window.headlessui});var a=e(t()),C=e(M()),s=e(t());var N=e(t());var k=e(t());var S=e(t());var D=e(t());var P=e(t());var T=e(t());var U=e(t());var F=e(t());var G=e(t());var W=e(t());var Q=e(t());var X=e(t());var Y=e(t());var Z=e(t());var q=e(t());var K=e(t());var J=e(t());var _=e(t());var $=e(t());var e1=e(t());var t1=e(t());var a1=e(t());var r1=e(t());var l1=e(t());var o1=e(t());var n1=e(t());var c1=e(t());var s1=e(t());var i1=e(t());var m1=e(t());var d1=e(t());var f1=e(t());var u1=e(t());var v1=e(t());var p1=e(t());var w1=e(t());var g1=e(t());var x1=e(t());var h1=e(t());var R1=e(t());var z1=e(t());var E1=e(t());var M1=e(t());var I1=e(t());var b1=e(t());var C1=e(t());var H1=e(t());var V1=e(t());var u=e(t());function B1(r){return u.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},r),u.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot;,clipRule:&quot;evenodd&quot;}))}var v=B1;var p=e(t());function j1(r){return p.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},r),p.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot;,clipRule:&quot;evenodd&quot;}))}var w=j1;var g=e(t());function O1(r){return g.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},r),g.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot;,clipRule:&quot;evenodd&quot;}))}var x=O1;var y1=e(t());var A1=e(t());var L1=e(t());var N1=e(t());var k1=e(t());var S1=e(t());var D1=e(t());var P1=e(t());var T1=e(t());var U1=e(t());var F1=e(t());var G1=e(t());var W1=e(t());var Q1=e(t());var X1=e(t());var Y1=e(t());var Z1=e(t());var q1=e(t());var K1=e(t());var J1=e(t());var _1=e(t());var $1=e(t());var e0=e(t());var t0=e(t());var a0=e(t());var r0=e(t());var l0=e(t());var o0=e(t());var n0=e(t());var c0=e(t());var s0=e(t());var i0=e(t());var m0=e(t());var d0=e(t());var f0=e(t());var u0=e(t());var v0=e(t());var h=e(t());function p0(r){return h.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},r),h.createElement(&quot;path&quot;,{d:&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;}))}var R=p0;var w0=e(t());var g0=e(t());var x0=e(t());var h0=e(t());var R0=e(t());var z0=e(t());var E0=e(t());var M0=e(t());var I0=e(t());var b0=e(t());var C0=e(t());var H0=e(t());var V0=e(t());var B0=e(t());var j0=e(t());var O0=e(t());var y0=e(t());var A0=e(t());var L0=e(t());var N0=e(t());var k0=e(t());var S0=e(t());var D0=e(t());var P0=e(t());var T0=e(t());var U0=e(t());var F0=e(t());var G0=e(t());var W0=e(t());var Q0=e(t());var X0=e(t());var Y0=e(t());var Z0=e(t());var q0=e(t());var K0=e(t());var J0=e(t());var _0=e(t());var $0=e(t());var ee=e(t());var te=e(t());var ae=e(t());var re=e(t());var le=e(t());var oe=e(t());var ne=e(t());var ce=e(t());var se=e(t());var ie=e(t());var me=e(t());var de=e(t());var fe=e(t());var ue=e(t());var ve=e(t());var pe=e(t());var we=e(t());var ge=e(t());var xe=e(t());var he=e(t());var Re=e(t());var ze=e(t());var Ee=e(t());var Me=e(t());var Ie=e(t());var be=e(t());var Ce=e(t());var He=e(t());var Ve=e(t());var Be=e(t());var je=e(t());var Oe=e(t());var ye=e(t());var Ae=e(t());var Le=e(t());var Ne=e(t());var ke=e(t());var Se=e(t());var De=e(t());var Pe=e(t());var Te=e(t());var Ue=e(t());var Fe=e(t());var Ge=e(t());var We=e(t());var Qe=e(t());var Xe=e(t());var Ye=e(t());var Ze=e(t());var qe=e(t());var Ke=e(t());var Je=e(t());var _e=e(t());var $e=e(t());var et=e(t());var tt=e(t());var at=e(t());var rt=e(t());var lt=e(t());var ot=e(t());var nt=e(t());var ct=e(t());var st=e(t());var it=e(t());var mt=e(t());var dt=e(t());var ft=e(t());var ut=e(t());var vt=e(t());var pt=e(t());var wt=e(t());var gt=e(t());var xt=e(t());var ht=e(t());var Rt=e(t());var zt=e(t());var Et=e(t());var Mt=e(t());var It=e(t());var bt=e(t());var Ct=e(t());var Ht=e(t());var Vt=e(t());var Bt=e(t());var jt=e(t());var Ot=e(t());var yt=e(t());var At=e(t());var Lt=e(t());var Nt=e(t());var kt=e(t());var St=e(t());var Dt=e(t());var Pt=e(t());var Tt=e(t());var Ut=e(t());var Ft=e(t());var Gt=e(t());var Wt=e(t());var Qt=e(t());var Xt=e(t());var Yt=e(t());var Zt=e(t());var o=e(b());function c(...r){return r.filter(Boolean).join(&quot; &quot;)}function H(){let r=(0,s.useRef)(null),n=(0,s.useRef)(null),m=(0,s.useRef)(null);return(0,s.useEffect)(()=&gt;{let l=360;r.current.scrollTop=(r.current.scrollHeight-n.current.offsetHeight-m.current.offsetHeight)*l/1440},[]),a.default.createElement(&quot;div&quot;,{className:&quot;flex h-full flex-col&quot;},a.default.createElement(&quot;header&quot;,{className:&quot;relative z-40 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6&quot;},a.default.createElement(&quot;h1&quot;,{className:&quot;text-lg font-semibold text-gray-900&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01&quot;},&quot;January 2022&quot;)),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center rounded-md shadow-sm md:items-stretch&quot;},a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Previous month&quot;),a.default.createElement(w,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block&quot;},&quot;Today&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden&quot;}),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Next month&quot;),a.default.createElement(x,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;}))),a.default.createElement(&quot;div&quot;,{className:&quot;hidden md:ml-4 md:flex md:items-center&quot;},a.default.createElement(o.Menu,{as:&quot;div&quot;,className:&quot;relative&quot;},a.default.createElement(o.Menu.Button,{type:&quot;button&quot;,className:&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50&quot;},&quot;Week view&quot;,a.default.createElement(v,{className:&quot;ml-2 h-5 w-5 text-gray-400&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(o.Transition,{as:s.Fragment,enter:&quot;transition ease-out duration-100&quot;,enterFrom:&quot;transform opacity-0 scale-95&quot;,enterTo:&quot;transform opacity-100 scale-100&quot;,leave:&quot;transition ease-in duration-75&quot;,leaveFrom:&quot;transform opacity-100 scale-100&quot;,leaveTo:&quot;transform opacity-0 scale-95&quot;},a.default.createElement(o.Menu.Items,{className:&quot;absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Day view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Week view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Month view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Year view&quot;)))))),a.default.createElement(&quot;div&quot;,{className:&quot;ml-6 h-6 w-px bg-gray-300&quot;}),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2&quot;},&quot;Add event&quot;)),a.default.createElement(o.Menu,{as:&quot;div&quot;,className:&quot;relative ml-6 md:hidden&quot;},a.default.createElement(o.Menu.Button,{className:&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Open menu&quot;),a.default.createElement(R,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(o.Transition,{as:s.Fragment,enter:&quot;transition ease-out duration-100&quot;,enterFrom:&quot;transform opacity-0 scale-95&quot;,enterTo:&quot;transform opacity-100 scale-100&quot;,leave:&quot;transition ease-in duration-75&quot;,leaveFrom:&quot;transform opacity-100 scale-100&quot;,leaveTo:&quot;transform opacity-0 scale-95&quot;},a.default.createElement(o.Menu.Items,{className:&quot;absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Create event&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Go to today&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Day view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Week view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Month view&quot;)),a.default.createElement(o.Menu.Item,null,({active:l})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(l?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Year view&quot;)))))))),a.default.createElement(&quot;div&quot;,{ref:r,className:&quot;flex flex-auto flex-col overflow-auto bg-white&quot;},a.default.createElement(&quot;div&quot;,{style:{width:&quot;165%&quot;},className:&quot;flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full&quot;},a.default.createElement(&quot;div&quot;,{ref:n,className:&quot;sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;grid grid-cols-7 text-sm leading-6 text-gray-500 sm:hidden&quot;},a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;M &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;10&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;T &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;11&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;W&quot;,&quot; &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;},&quot;12&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;T &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;13&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;F &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;14&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;S &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;15&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-2 pb-3&quot;},&quot;S &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900&quot;},&quot;16&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;-mr-px hidden grid-cols-7 divide-x divide-gray-100 border-r border-gray-100 text-sm leading-6 text-gray-500 sm:grid&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;col-end-1 w-14&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Mon &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;10&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Tue &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;11&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;flex items-baseline&quot;},&quot;Wed&quot;,&quot; &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;ml-1.5 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;},&quot;12&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Thu &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;13&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Fri &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;14&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Sat &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;15&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center justify-center py-3&quot;},a.default.createElement(&quot;span&quot;,null,&quot;Sun &quot;,a.default.createElement(&quot;span&quot;,{className:&quot;items-center justify-center font-semibold text-gray-900&quot;},&quot;16&quot;))))),a.default.createElement(&quot;div&quot;,{className:&quot;flex flex-auto&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;grid flex-auto grid-cols-1 grid-rows-1&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100&quot;,style:{gridTemplateRows:&quot;repeat(48, minmax(3.5rem, 1fr))&quot;}},a.default.createElement(&quot;div&quot;,{ref:m,className:&quot;row-end-1 h-7&quot;}),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;12AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;1AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;2AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;3AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;4AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;5AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;6AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;7AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;8AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;9AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;10AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;11AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;12PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;1PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;2PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;3PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;4PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;5PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;6PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;7PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;8PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;9PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;10PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;11PM&quot;)),a.default.createElement(&quot;div&quot;,null)),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-gray-100 sm:grid sm:grid-cols-7&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;col-start-1 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-2 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-3 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-4 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-5 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-6 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-7 row-span-full&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;col-start-8 row-span-full w-8&quot;})),a.default.createElement(&quot;ol&quot;,{className:&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:grid-cols-7 sm:pr-8&quot;,style:{gridTemplateRows:&quot;1.75rem repeat(288, minmax(0, 1fr)) auto&quot;}},a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px flex sm:col-start-3&quot;,style:{gridRow:&quot;74 / span 12&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-blue-700&quot;},&quot;Breakfast&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-blue-500 group-hover:text-blue-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-12T06:00&quot;},&quot;6:00 AM&quot;)))),a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px flex sm:col-start-3&quot;,style:{gridRow:&quot;92 / span 30&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-pink-700&quot;},&quot;Flight to Paris&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-pink-500 group-hover:text-pink-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-12T07:30&quot;},&quot;7:30 AM&quot;)))),a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px hidden sm:col-start-6 sm:flex&quot;,style:{gridRow:&quot;122 / span 24&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-gray-700&quot;},&quot;Meeting with design team at Disney&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-gray-500 group-hover:text-gray-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-15T10:00&quot;},&quot;10:00 AM&quot;))))))))))}document.body.innerHTML=`
&lt;div class=&quot;h-0 min-h-[768px] bg-gray-50&quot;&gt;
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
`;C.default.render(a.default.createElement(H),document.getElementById(&quot;app&quot;));})();
&lt;/script&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-2c77a3f6925b437e983e0d07fe3288b1"
id="component-2c77a3f6925b437e983e0d07fe3288b1"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div class=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-20 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;div&gt;\n &lt;h1 class=\&quot;text-lg font-semibold leading-6 text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;sm:hidden\&quot;&gt;Jan 22, 2022&lt;\/time&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;hidden sm:inline\&quot;&gt;January 22, 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;p class=\&quot;mt-1 text-sm text-gray-500\&quot;&gt;Saturday&lt;\/p&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot;&gt;&lt;\/span&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;div class=\&quot;relative\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot; id=\&quot;menu-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n Day view\n &lt;!-- Heroicon name: solid\/chevron-down --&gt;\n &lt;svg class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-0\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-1\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-2\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-3\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot;&gt;&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/dots-horizontal --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path d=\&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-2\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-3\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-4\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-5\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;flex flex-auto overflow-hidden bg-white\&quot;&gt;\n &lt;div class=\&quot;flex flex-auto flex-col overflow-auto\&quot;&gt;\n &lt;div class=\&quot;sticky top-0 z-10 grid flex-none grid-cols-7 bg-white text-xs text-gray-500 shadow ring-1 ring-black ring-opacity-5 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;W&lt;\/span&gt;\n &lt;!-- Default: \&quot;text-gray-900\&quot;, Selected: \&quot;bg-gray-900 text-white\&quot;, Today (Not Selected): \&quot;text-indigo-600\&quot;, Today (Selected): \&quot;bg-indigo-600 text-white\&quot; --&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;19&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-indigo-600\&quot;&gt;20&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;F&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;21&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-base font-semibold text-white\&quot;&gt;22&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;23&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;M&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;24&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;25&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex w-full flex-auto\&quot;&gt;\n &lt;div class=\&quot;w-14 flex-none bg-white ring-1 ring-gray-100\&quot;&gt;&lt;\/div&gt;\n &lt;div class=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n &lt;!-- Horizontal lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot; style=\&quot;grid-template-rows: repeat(48, minmax(3.5rem, 1fr))\&quot;&gt;\n &lt;div class=\&quot;row-end-1 h-7\&quot;&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;-mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n\n &lt;!-- Events --&gt;\n &lt;ol class=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1\&quot; style=\&quot;grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto\&quot;&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 74 \/ span 12\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p class=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-22T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 92 \/ span 30\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p class=\&quot;order-1 text-pink-500 group-hover:text-pink-700\&quot;&gt;John F. Kennedy International Airport&lt;\/p&gt;\n &lt;p class=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-22T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 134 \/ span 18\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-indigo-50 p-2 text-xs leading-5 hover:bg-indigo-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-indigo-700\&quot;&gt;Sightseeing&lt;\/p&gt;\n &lt;p class=\&quot;order-1 text-indigo-500 group-hover:text-indigo-700\&quot;&gt;Eiffel Tower&lt;\/p&gt;\n &lt;p class=\&quot;text-indigo-500 group-hover:text-indigo-700\&quot;&gt;&lt;time datetime=\&quot;2022-01-22T11:00\&quot;&gt;11:00 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden w-1\/2 max-w-md flex-none border-l border-gray-100 py-10 px-8 md:block\&quot;&gt;\n &lt;div class=\&quot;flex items-center text-center text-gray-900\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;div class=\&quot;flex-auto font-semibold\&quot;&gt;January 2022&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-center text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;!--\n Always include: \&quot;py-1.5 hover:bg-gray-100 focus:z-10\&quot;\n Is current month, include: \&quot;bg-white\&quot;\n Is not current month, include: \&quot;bg-gray-50\&quot;\n Is selected or is today, include: \&quot;font-semibold\&quot;\n Is selected, include: \&quot;text-white\&quot;\n Is not selected, is not today, and is current month, include: \&quot;text-gray-900\&quot;\n Is not selected, is not today, and is not current month, include: \&quot;text-gray-400\&quot;\n Is today and is not selected, include: \&quot;text-indigo-600\&quot;\n\n Top left day, include: \&quot;rounded-tl-lg\&quot;\n Top right day, include: \&quot;rounded-tr-lg\&quot;\n Bottom left day, include: \&quot;rounded-bl-lg\&quot;\n Bottom right day, include: \&quot;rounded-br-lg\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;!--\n Always include: \&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;\n Is selected and is today, include: \&quot;bg-indigo-600\&quot;\n Is selected and is not today, include: \&quot;bg-gray-900\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 font-semibold text-white\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-bl-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment, useEffect, useRef } from &#039;react&#039;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\n\nconst days = [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true, isSelected: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n]\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n const container = useRef(null)\n const containerNav = useRef(null)\n const containerOffset = useRef(null)\n\n useEffect(() =&gt; {\n \/\/ Set the container scroll position based on the current time.\n const currentMinute = new Date().getHours() * 60\n container.current.scrollTop =\n ((container.current.scrollHeight - containerNav.current.offsetHeight - containerOffset.current.offsetHeight) *\n currentMinute) \/\n 1440\n }, [])\n\n return (\n &lt;div className=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header className=\&quot;relative z-20 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;div&gt;\n &lt;h1 className=\&quot;text-lg font-semibold leading-6 text-gray-900\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-22\&quot; className=\&quot;sm:hidden\&quot;&gt;\n Jan 22, 2022\n &lt;\/time&gt;\n &lt;time dateTime=\&quot;2022-01-22\&quot; className=\&quot;hidden sm:inline\&quot;&gt;\n January 22, 2022\n &lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;p className=\&quot;mt-1 text-sm text-gray-500\&quot;&gt;Saturday&lt;\/p&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex items-center\&quot;&gt;\n &lt;div className=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;\n &gt;\n Today\n &lt;\/button&gt;\n &lt;span className=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative\&quot;&gt;\n &lt;Menu.Button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;\n &gt;\n Day view\n &lt;ChevronDownIcon className=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;div className=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;\n &gt;\n Add event\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;Menu.Button className=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Create event\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Go to today\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div className=\&quot;flex flex-auto overflow-hidden bg-white\&quot;&gt;\n &lt;div ref={container} className=\&quot;flex flex-auto flex-col overflow-auto\&quot;&gt;\n &lt;div\n ref={containerNav}\n className=\&quot;sticky top-0 z-10 grid flex-none grid-cols-7 bg-white text-xs text-gray-500 shadow ring-1 ring-black ring-opacity-5 md:hidden\&quot;\n &gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;W&lt;\/span&gt;\n {\/* Default: \&quot;text-gray-900\&quot;, Selected: \&quot;bg-gray-900 text-white\&quot;, Today (Not Selected): \&quot;text-indigo-600\&quot;, Today (Selected): \&quot;bg-indigo-600 text-white\&quot; *\/}\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;\n 19\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-indigo-600\&quot;&gt;\n 20\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;F&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;\n 21\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-base font-semibold text-white\&quot;&gt;\n 22\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;\n 23\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;M&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;\n 24\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; className=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span className=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;\n 25\n &lt;\/span&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;flex w-full flex-auto\&quot;&gt;\n &lt;div className=\&quot;w-14 flex-none bg-white ring-1 ring-gray-100\&quot; \/&gt;\n &lt;div className=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n {\/* Horizontal lines *\/}\n &lt;div\n className=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot;\n style={{ gridTemplateRows: &#039;repeat(48, minmax(3.5rem, 1fr))&#039; }}\n &gt;\n &lt;div ref={containerOffset} className=\&quot;row-end-1 h-7\&quot;&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 12AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 1AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 2AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 3AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 4AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 5AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 6AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 7AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 8AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 9AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 10AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 11AM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 12PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 1PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 2PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 3PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 4PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 5PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 6PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 7PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 8PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 9PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 10PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div className=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;\n 11PM\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;\/div&gt;\n\n {\/* Events *\/}\n &lt;ol\n className=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1\&quot;\n style={{ gridTemplateRows: &#039;1.75rem repeat(288, minmax(0, 1fr)) auto&#039; }}\n &gt;\n &lt;li className=\&quot;relative mt-px flex\&quot; style={{ gridRow: &#039;74 \/ span 12&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p className=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-22T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;relative mt-px flex\&quot; style={{ gridRow: &#039;92 \/ span 30&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p className=\&quot;order-1 text-pink-500 group-hover:text-pink-700\&quot;&gt;\n John F. Kennedy International Airport\n &lt;\/p&gt;\n &lt;p className=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-22T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;relative mt-px flex\&quot; style={{ gridRow: &#039;134 \/ span 18&#039; }}&gt;\n &lt;a\n href=\&quot;#\&quot;\n className=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-indigo-50 p-2 text-xs leading-5 hover:bg-indigo-100\&quot;\n &gt;\n &lt;p className=\&quot;order-1 font-semibold text-indigo-700\&quot;&gt;Sightseeing&lt;\/p&gt;\n &lt;p className=\&quot;order-1 text-indigo-500 group-hover:text-indigo-700\&quot;&gt;Eiffel Tower&lt;\/p&gt;\n &lt;p className=\&quot;text-indigo-500 group-hover:text-indigo-700\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-22T11:00\&quot;&gt;11:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;hidden w-1\/2 max-w-md flex-none border-l border-gray-100 py-10 px-8 md:block\&quot;&gt;\n &lt;div className=\&quot;flex items-center text-center text-gray-900\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;div className=\&quot;flex-auto font-semibold\&quot;&gt;January 2022&lt;\/div&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;mt-6 grid grid-cols-7 text-center text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n {days.map((day, dayIdx) =&gt; (\n &lt;button\n key={day.date}\n type=\&quot;button\&quot;\n className={classNames(\n &#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;,\n day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;,\n (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;,\n day.isSelected &amp;&amp; &#039;text-white&#039;,\n !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;,\n !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-400&#039;,\n day.isToday &amp;&amp; !day.isSelected &amp;&amp; &#039;text-indigo-600&#039;,\n dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;,\n dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;,\n dayIdx === days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;,\n dayIdx === days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={classNames(\n &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;,\n day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;,\n day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;\n )}\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n &lt;\/button&gt;\n ))}\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div class=\&quot;flex h-full flex-col\&quot;&gt;\n &lt;header class=\&quot;relative z-20 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;div&gt;\n &lt;h1 class=\&quot;text-lg font-semibold leading-6 text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;sm:hidden\&quot;&gt;Jan 22, 2022&lt;\/time&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;hidden sm:inline\&quot;&gt;January 22, 2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;p class=\&quot;mt-1 text-sm text-gray-500\&quot;&gt;Saturday&lt;\/p&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative\&quot;&gt;\n &lt;MenuButton type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;&gt;\n Day view\n &lt;ChevronDownIcon class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;MenuButton class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;flex flex-auto overflow-hidden bg-white\&quot;&gt;\n &lt;div ref=\&quot;container\&quot; class=\&quot;flex flex-auto flex-col overflow-auto\&quot;&gt;\n &lt;div ref=\&quot;containerNav\&quot; class=\&quot;sticky top-0 z-10 grid flex-none grid-cols-7 bg-white text-xs text-gray-500 shadow ring-1 ring-black ring-opacity-5 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;W&lt;\/span&gt;\n &lt;!-- Default: \&quot;text-gray-900\&quot;, Selected: \&quot;bg-gray-900 text-white\&quot;, Today (Not Selected): \&quot;text-indigo-600\&quot;, Today (Selected): \&quot;bg-indigo-600 text-white\&quot; --&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;19&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-indigo-600\&quot;&gt;20&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;F&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;21&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-base font-semibold text-white\&quot;&gt;22&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;S&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;23&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;M&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;24&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex flex-col items-center pt-3 pb-1.5\&quot;&gt;\n &lt;span&gt;T&lt;\/span&gt;\n &lt;span class=\&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900\&quot;&gt;25&lt;\/span&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;flex w-full flex-auto\&quot;&gt;\n &lt;div class=\&quot;w-14 flex-none bg-white ring-1 ring-gray-100\&quot; \/&gt;\n &lt;div class=\&quot;grid flex-auto grid-cols-1 grid-rows-1\&quot;&gt;\n &lt;!-- Horizontal lines --&gt;\n &lt;div class=\&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100\&quot; style=\&quot;grid-template-rows: repeat(48, minmax(3.5rem, 1fr))\&quot;&gt;\n &lt;div ref=\&quot;containerOffset\&quot; class=\&quot;row-end-1 h-7\&quot;&gt;&lt;\/div&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11AM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;12PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;1PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;2PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;3PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;4PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;5PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;6PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;7PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;8PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;9PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;10PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;div&gt;\n &lt;div class=\&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400\&quot;&gt;11PM&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div \/&gt;\n &lt;\/div&gt;\n\n &lt;!-- Events --&gt;\n &lt;ol class=\&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1\&quot; style=\&quot;grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto\&quot;&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 74 \/ span 12\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-blue-700\&quot;&gt;Breakfast&lt;\/p&gt;\n &lt;p class=\&quot;text-blue-500 group-hover:text-blue-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22T06:00\&quot;&gt;6:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 92 \/ span 30\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-pink-700\&quot;&gt;Flight to Paris&lt;\/p&gt;\n &lt;p class=\&quot;order-1 text-pink-500 group-hover:text-pink-700\&quot;&gt;John F. Kennedy International Airport&lt;\/p&gt;\n &lt;p class=\&quot;text-pink-500 group-hover:text-pink-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22T07:30\&quot;&gt;7:30 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;relative mt-px flex\&quot; style=\&quot;grid-row: 134 \/ span 18\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-indigo-50 p-2 text-xs leading-5 hover:bg-indigo-100\&quot;&gt;\n &lt;p class=\&quot;order-1 font-semibold text-indigo-700\&quot;&gt;Sightseeing&lt;\/p&gt;\n &lt;p class=\&quot;order-1 text-indigo-500 group-hover:text-indigo-700\&quot;&gt;Eiffel Tower&lt;\/p&gt;\n &lt;p class=\&quot;text-indigo-500 group-hover:text-indigo-700\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22T11:00\&quot;&gt;11:00 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/a&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden w-1\/2 max-w-md flex-none border-l border-gray-100 py-10 px-8 md:block\&quot;&gt;\n &lt;div class=\&quot;flex items-center text-center text-gray-900\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;div class=\&quot;flex-auto font-semibold\&quot;&gt;January 2022&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-center text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;button v-for=\&quot;(day, dayIdx) in days\&quot; :key=\&quot;day.date\&quot; type=\&quot;button\&quot; :class=\&quot;[&#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;, day.isCurrentMonth ? &#039;bg-white&#039; : &#039;bg-gray-50&#039;, (day.isSelected || day.isToday) &amp;&amp; &#039;font-semibold&#039;, day.isSelected &amp;&amp; &#039;text-white&#039;, !day.isSelected &amp;&amp; day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-900&#039;, !day.isSelected &amp;&amp; !day.isCurrentMonth &amp;&amp; !day.isToday &amp;&amp; &#039;text-gray-400&#039;, day.isToday &amp;&amp; !day.isSelected &amp;&amp; &#039;text-indigo-600&#039;, dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;, dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;, dayIdx === days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;, dayIdx === days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;[&#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;, day.isSelected &amp;&amp; day.isToday &amp;&amp; &#039;bg-indigo-600&#039;, day.isSelected &amp;&amp; !day.isToday &amp;&amp; &#039;bg-gray-900&#039;]\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ref, onMounted } from &#039;vue&#039;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/vue\/solid&#039;\nimport { Menu, MenuButton, MenuItem, MenuItems } from &#039;@headlessui\/vue&#039;\n\nconst days = [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true, isSelected: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n]\n\nexport default {\n components: {\n Menu,\n MenuButton,\n MenuItem,\n MenuItems,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n },\n setup() {\n const container = ref(null)\n const containerNav = ref(null)\n const containerOffset = ref(null)\n\n onMounted(() =&gt; {\n \/\/ Set the container scroll position based on the current time.\n const currentMinute = new Date().getHours() * 60\n container.value.scrollTop =\n ((container.value.scrollHeight - containerNav.value.offsetHeight - containerOffset.value.offsetHeight) *\n currentMinute) \/\n 1440\n })\n\n return {\n container,\n containerNav,\n containerOffset,\n days,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-2c77a3f6925b437e983e0d07fe3288b1" class="font-medium text-gray-900 truncate">
<a href="#component-2c77a3f6925b437e983e0d07fe3288b1" class="mr-1">Day view</a>
</h2>
<span class="hidden lg:block flex-none uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1 rounded-md ml-3">
Requires <abbr title="JavaScript">JS</abbr>
</span>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-2c77a3f6925b437e983e0d07fe3288b1 {
height: 768px;
}
@media (min-width: 704px) {
#frame-2c77a3f6925b437e983e0d07fe3288b1 {
height: 768px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-2c77a3f6925b437e983e0d07fe3288b1" class="bg-white">
<iframe x-ref="iframe" title="Day view preview" aria-label="Day view preview" name="frame-2c77a3f6925b437e983e0d07fe3288b1" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;style&gt;#app { display: contents }&lt;/style&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;script src=&quot;https://unpkg.com/[email protected]/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;https://unpkg.com/[email protected]/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/headlessui.js?id=5db182743a58aebdec7d6c085413e7c0&quot;&gt;&lt;/script&gt;&lt;script&gt;(()=&gt;{var B=Object.create;var f=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var L=o=&gt;f(o,&quot;__esModule&quot;,{value:!0});var v=(o,n)=&gt;()=&gt;(n||o((n={exports:{}}).exports,n),n.exports);var N=(o,n,m,r)=&gt;{if(n&amp;&amp;typeof n==&quot;object&quot;||typeof n==&quot;function&quot;)for(let i of j(n))!y.call(o,i)&amp;&amp;(m||i!==&quot;default&quot;)&amp;&amp;f(o,i,{get:()=&gt;n[i],enumerable:!(r=O(n,i))||r.enumerable});return o},e=(o,n)=&gt;N(L(f(o!=null?B(A(o)):{},&quot;default&quot;,!n&amp;&amp;o&amp;&amp;o.__esModule?{get:()=&gt;o.default,enumerable:!0}:{value:o,enumerable:!0})),o);var t=v((qt,M)=&gt;{M.exports=window.React});var I=v((_t,E)=&gt;{E.exports=window.ReactDOM});var C=v((Pd,b)=&gt;{b.exports=window.headlessui});var a=e(t()),H=e(I()),s=e(t());var k=e(t());var S=e(t());var D=e(t());var T=e(t());var P=e(t());var U=e(t());var F=e(t());var G=e(t());var W=e(t());var J=e(t());var Q=e(t());var X=e(t());var Y=e(t());var Z=e(t());var K=e(t());var q=e(t());var _=e(t());var $=e(t());var e1=e(t());var t1=e(t());var a1=e(t());var r1=e(t());var o1=e(t());var l1=e(t());var n1=e(t());var c1=e(t());var i1=e(t());var s1=e(t());var m1=e(t());var d1=e(t());var u1=e(t());var f1=e(t());var v1=e(t());var p1=e(t());var w1=e(t());var g1=e(t());var x1=e(t());var h1=e(t());var R1=e(t());var z1=e(t());var M1=e(t());var E1=e(t());var I1=e(t());var b1=e(t());var C1=e(t());var H1=e(t());var V1=e(t());var B1=e(t());var p=e(t());function O1(o){return p.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},o),p.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot;,clipRule:&quot;evenodd&quot;}))}var w=O1;var g=e(t());function j1(o){return g.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},o),g.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot;,clipRule:&quot;evenodd&quot;}))}var d=j1;var x=e(t());function A1(o){return x.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},o),x.createElement(&quot;path&quot;,{fillRule:&quot;evenodd&quot;,d:&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot;,clipRule:&quot;evenodd&quot;}))}var u=A1;var y1=e(t());var L1=e(t());var N1=e(t());var k1=e(t());var S1=e(t());var D1=e(t());var T1=e(t());var P1=e(t());var U1=e(t());var F1=e(t());var G1=e(t());var W1=e(t());var J1=e(t());var Q1=e(t());var X1=e(t());var Y1=e(t());var Z1=e(t());var K1=e(t());var q1=e(t());var _1=e(t());var $1=e(t());var e0=e(t());var t0=e(t());var a0=e(t());var r0=e(t());var o0=e(t());var l0=e(t());var n0=e(t());var c0=e(t());var i0=e(t());var s0=e(t());var m0=e(t());var d0=e(t());var u0=e(t());var f0=e(t());var v0=e(t());var p0=e(t());var h=e(t());function w0(o){return h.createElement(&quot;svg&quot;,Object.assign({xmlns:&quot;http://www.w3.org/2000/svg&quot;,viewBox:&quot;0 0 20 20&quot;,fill:&quot;currentColor&quot;},o),h.createElement(&quot;path&quot;,{d:&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;}))}var R=w0;var g0=e(t());var x0=e(t());var h0=e(t());var R0=e(t());var z0=e(t());var M0=e(t());var E0=e(t());var I0=e(t());var b0=e(t());var C0=e(t());var H0=e(t());var V0=e(t());var B0=e(t());var O0=e(t());var j0=e(t());var A0=e(t());var y0=e(t());var L0=e(t());var N0=e(t());var k0=e(t());var S0=e(t());var D0=e(t());var T0=e(t());var P0=e(t());var U0=e(t());var F0=e(t());var G0=e(t());var W0=e(t());var J0=e(t());var Q0=e(t());var X0=e(t());var Y0=e(t());var Z0=e(t());var K0=e(t());var q0=e(t());var _0=e(t());var $0=e(t());var ee=e(t());var te=e(t());var ae=e(t());var re=e(t());var oe=e(t());var le=e(t());var ne=e(t());var ce=e(t());var ie=e(t());var se=e(t());var me=e(t());var de=e(t());var ue=e(t());var fe=e(t());var ve=e(t());var pe=e(t());var we=e(t());var ge=e(t());var xe=e(t());var he=e(t());var Re=e(t());var ze=e(t());var Me=e(t());var Ee=e(t());var Ie=e(t());var be=e(t());var Ce=e(t());var He=e(t());var Ve=e(t());var Be=e(t());var Oe=e(t());var je=e(t());var Ae=e(t());var ye=e(t());var Le=e(t());var Ne=e(t());var ke=e(t());var Se=e(t());var De=e(t());var Te=e(t());var Pe=e(t());var Ue=e(t());var Fe=e(t());var Ge=e(t());var We=e(t());var Je=e(t());var Qe=e(t());var Xe=e(t());var Ye=e(t());var Ze=e(t());var Ke=e(t());var qe=e(t());var _e=e(t());var $e=e(t());var et=e(t());var tt=e(t());var at=e(t());var rt=e(t());var ot=e(t());var lt=e(t());var nt=e(t());var ct=e(t());var it=e(t());var st=e(t());var mt=e(t());var dt=e(t());var ut=e(t());var ft=e(t());var vt=e(t());var pt=e(t());var wt=e(t());var gt=e(t());var xt=e(t());var ht=e(t());var Rt=e(t());var zt=e(t());var Mt=e(t());var Et=e(t());var It=e(t());var bt=e(t());var Ct=e(t());var Ht=e(t());var Vt=e(t());var Bt=e(t());var Ot=e(t());var jt=e(t());var At=e(t());var yt=e(t());var Lt=e(t());var Nt=e(t());var kt=e(t());var St=e(t());var Dt=e(t());var Tt=e(t());var Pt=e(t());var Ut=e(t());var Ft=e(t());var Gt=e(t());var Wt=e(t());var Jt=e(t());var Qt=e(t());var Xt=e(t());var Yt=e(t());var Zt=e(t());var l=e(C()),z=[{date:&quot;2021-12-27&quot;},{date:&quot;2021-12-28&quot;},{date:&quot;2021-12-29&quot;},{date:&quot;2021-12-30&quot;},{date:&quot;2021-12-31&quot;},{date:&quot;2022-01-01&quot;,isCurrentMonth:!0},{date:&quot;2022-01-02&quot;,isCurrentMonth:!0},{date:&quot;2022-01-03&quot;,isCurrentMonth:!0},{date:&quot;2022-01-04&quot;,isCurrentMonth:!0},{date:&quot;2022-01-05&quot;,isCurrentMonth:!0},{date:&quot;2022-01-06&quot;,isCurrentMonth:!0},{date:&quot;2022-01-07&quot;,isCurrentMonth:!0},{date:&quot;2022-01-08&quot;,isCurrentMonth:!0},{date:&quot;2022-01-09&quot;,isCurrentMonth:!0},{date:&quot;2022-01-10&quot;,isCurrentMonth:!0},{date:&quot;2022-01-11&quot;,isCurrentMonth:!0},{date:&quot;2022-01-12&quot;,isCurrentMonth:!0,isToday:!0},{date:&quot;2022-01-13&quot;,isCurrentMonth:!0},{date:&quot;2022-01-14&quot;,isCurrentMonth:!0},{date:&quot;2022-01-15&quot;,isCurrentMonth:!0},{date:&quot;2022-01-16&quot;,isCurrentMonth:!0},{date:&quot;2022-01-17&quot;,isCurrentMonth:!0},{date:&quot;2022-01-18&quot;,isCurrentMonth:!0},{date:&quot;2022-01-19&quot;,isCurrentMonth:!0},{date:&quot;2022-01-20&quot;,isCurrentMonth:!0},{date:&quot;2022-01-21&quot;,isCurrentMonth:!0},{date:&quot;2022-01-22&quot;,isCurrentMonth:!0,isSelected:!0},{date:&quot;2022-01-23&quot;,isCurrentMonth:!0},{date:&quot;2022-01-24&quot;,isCurrentMonth:!0},{date:&quot;2022-01-25&quot;,isCurrentMonth:!0},{date:&quot;2022-01-26&quot;,isCurrentMonth:!0},{date:&quot;2022-01-27&quot;,isCurrentMonth:!0},{date:&quot;2022-01-28&quot;,isCurrentMonth:!0},{date:&quot;2022-01-29&quot;,isCurrentMonth:!0},{date:&quot;2022-01-30&quot;,isCurrentMonth:!0},{date:&quot;2022-01-31&quot;,isCurrentMonth:!0},{date:&quot;2022-02-01&quot;},{date:&quot;2022-02-02&quot;},{date:&quot;2022-02-03&quot;},{date:&quot;2022-02-04&quot;},{date:&quot;2022-02-05&quot;},{date:&quot;2022-02-06&quot;}];function c(...o){return o.filter(Boolean).join(&quot; &quot;)}function V(){let o=(0,s.useRef)(null),n=(0,s.useRef)(null),m=(0,s.useRef)(null);return(0,s.useEffect)(()=&gt;{let r=360;o.current.scrollTop=(o.current.scrollHeight-n.current.offsetHeight-m.current.offsetHeight)*r/1440},[]),a.default.createElement(&quot;div&quot;,{className:&quot;flex h-full flex-col&quot;},a.default.createElement(&quot;header&quot;,{className:&quot;relative z-20 flex flex-none items-center justify-between border-b border-gray-200 py-4 px-6&quot;},a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;h1&quot;,{className:&quot;text-lg font-semibold leading-6 text-gray-900&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-22&quot;,className:&quot;sm:hidden&quot;},&quot;Jan 22, 2022&quot;),a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-22&quot;,className:&quot;hidden sm:inline&quot;},&quot;January 22, 2022&quot;)),a.default.createElement(&quot;p&quot;,{className:&quot;mt-1 text-sm text-gray-500&quot;},&quot;Saturday&quot;)),a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center rounded-md shadow-sm md:items-stretch&quot;},a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Previous month&quot;),a.default.createElement(d,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block&quot;},&quot;Today&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden&quot;}),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Next month&quot;),a.default.createElement(u,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;}))),a.default.createElement(&quot;div&quot;,{className:&quot;hidden md:ml-4 md:flex md:items-center&quot;},a.default.createElement(l.Menu,{as:&quot;div&quot;,className:&quot;relative&quot;},a.default.createElement(l.Menu.Button,{type:&quot;button&quot;,className:&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50&quot;},&quot;Day view&quot;,a.default.createElement(w,{className:&quot;ml-2 h-5 w-5 text-gray-400&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(l.Transition,{as:s.Fragment,enter:&quot;transition ease-out duration-100&quot;,enterFrom:&quot;transform opacity-0 scale-95&quot;,enterTo:&quot;transform opacity-100 scale-100&quot;,leave:&quot;transition ease-in duration-75&quot;,leaveFrom:&quot;transform opacity-100 scale-100&quot;,leaveTo:&quot;transform opacity-0 scale-95&quot;},a.default.createElement(l.Menu.Items,{className:&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Day view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Week view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Month view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Year view&quot;)))))),a.default.createElement(&quot;div&quot;,{className:&quot;ml-6 h-6 w-px bg-gray-300&quot;}),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2&quot;},&quot;Add event&quot;)),a.default.createElement(l.Menu,{as:&quot;div&quot;,className:&quot;relative ml-6 md:hidden&quot;},a.default.createElement(l.Menu.Button,{className:&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Open menu&quot;),a.default.createElement(R,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(l.Transition,{as:s.Fragment,enter:&quot;transition ease-out duration-100&quot;,enterFrom:&quot;transform opacity-0 scale-95&quot;,enterTo:&quot;transform opacity-100 scale-100&quot;,leave:&quot;transition ease-in duration-75&quot;,leaveFrom:&quot;transform opacity-100 scale-100&quot;,leaveTo:&quot;transform opacity-0 scale-95&quot;},a.default.createElement(l.Menu.Items,{className:&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Create event&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Go to today&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;py-1&quot;},a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Day view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Week view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Month view&quot;)),a.default.createElement(l.Menu.Item,null,({active:r})=&gt;a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:c(r?&quot;bg-gray-100 text-gray-900&quot;:&quot;text-gray-700&quot;,&quot;block px-4 py-2 text-sm&quot;)},&quot;Year view&quot;)))))))),a.default.createElement(&quot;div&quot;,{className:&quot;flex flex-auto overflow-hidden bg-white&quot;},a.default.createElement(&quot;div&quot;,{ref:o,className:&quot;flex flex-auto flex-col overflow-auto&quot;},a.default.createElement(&quot;div&quot;,{ref:n,className:&quot;sticky top-0 z-10 grid flex-none grid-cols-7 bg-white text-xs text-gray-500 shadow ring-1 ring-black ring-opacity-5 md:hidden&quot;},a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;W&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900&quot;},&quot;19&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;T&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-indigo-600&quot;},&quot;20&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;F&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900&quot;},&quot;21&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;S&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-base font-semibold text-white&quot;},&quot;22&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;S&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900&quot;},&quot;23&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;M&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900&quot;},&quot;24&quot;)),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;flex flex-col items-center pt-3 pb-1.5&quot;},a.default.createElement(&quot;span&quot;,null,&quot;T&quot;),a.default.createElement(&quot;span&quot;,{className:&quot;mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold text-gray-900&quot;},&quot;25&quot;))),a.default.createElement(&quot;div&quot;,{className:&quot;flex w-full flex-auto&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;w-14 flex-none bg-white ring-1 ring-gray-100&quot;}),a.default.createElement(&quot;div&quot;,{className:&quot;grid flex-auto grid-cols-1 grid-rows-1&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100&quot;,style:{gridTemplateRows:&quot;repeat(48, minmax(3.5rem, 1fr))&quot;}},a.default.createElement(&quot;div&quot;,{ref:m,className:&quot;row-end-1 h-7&quot;}),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;12AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;1AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;2AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;3AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;4AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;5AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;6AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;7AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;8AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;9AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;10AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;11AM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;12PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;1PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;2PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;3PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;4PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;5PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;6PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;7PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;8PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;9PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;10PM&quot;)),a.default.createElement(&quot;div&quot;,null),a.default.createElement(&quot;div&quot;,null,a.default.createElement(&quot;div&quot;,{className:&quot;sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400&quot;},&quot;11PM&quot;)),a.default.createElement(&quot;div&quot;,null)),a.default.createElement(&quot;ol&quot;,{className:&quot;col-start-1 col-end-2 row-start-1 grid grid-cols-1&quot;,style:{gridTemplateRows:&quot;1.75rem repeat(288, minmax(0, 1fr)) auto&quot;}},a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px flex&quot;,style:{gridRow:&quot;74 / span 12&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-blue-700&quot;},&quot;Breakfast&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-blue-500 group-hover:text-blue-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-22T06:00&quot;},&quot;6:00 AM&quot;)))),a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px flex&quot;,style:{gridRow:&quot;92 / span 30&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-pink-50 p-2 text-xs leading-5 hover:bg-pink-100&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-pink-700&quot;},&quot;Flight to Paris&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;order-1 text-pink-500 group-hover:text-pink-700&quot;},&quot;John F. Kennedy International Airport&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-pink-500 group-hover:text-pink-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-22T07:30&quot;},&quot;7:30 AM&quot;)))),a.default.createElement(&quot;li&quot;,{className:&quot;relative mt-px flex&quot;,style:{gridRow:&quot;134 / span 18&quot;}},a.default.createElement(&quot;a&quot;,{href:&quot;#&quot;,className:&quot;group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-indigo-50 p-2 text-xs leading-5 hover:bg-indigo-100&quot;},a.default.createElement(&quot;p&quot;,{className:&quot;order-1 font-semibold text-indigo-700&quot;},&quot;Sightseeing&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;order-1 text-indigo-500 group-hover:text-indigo-700&quot;},&quot;Eiffel Tower&quot;),a.default.createElement(&quot;p&quot;,{className:&quot;text-indigo-500 group-hover:text-indigo-700&quot;},a.default.createElement(&quot;time&quot;,{dateTime:&quot;2022-01-22T11:00&quot;},&quot;11:00 AM&quot;)))))))),a.default.createElement(&quot;div&quot;,{className:&quot;hidden w-1/2 max-w-md flex-none border-l border-gray-100 py-10 px-8 md:block&quot;},a.default.createElement(&quot;div&quot;,{className:&quot;flex items-center text-center text-gray-900&quot;},a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Previous month&quot;),a.default.createElement(d,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;})),a.default.createElement(&quot;div&quot;,{className:&quot;flex-auto font-semibold&quot;},&quot;January 2022&quot;),a.default.createElement(&quot;button&quot;,{type:&quot;button&quot;,className:&quot;-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;},a.default.createElement(&quot;span&quot;,{className:&quot;sr-only&quot;},&quot;Next month&quot;),a.default.createElement(u,{className:&quot;h-5 w-5&quot;,&quot;aria-hidden&quot;:&quot;true&quot;}))),a.default.createElement(&quot;div&quot;,{className:&quot;mt-6 grid grid-cols-7 text-center text-xs leading-6 text-gray-500&quot;},a.default.createElement(&quot;div&quot;,null,&quot;M&quot;),a.default.createElement(&quot;div&quot;,null,&quot;T&quot;),a.default.createElement(&quot;div&quot;,null,&quot;W&quot;),a.default.createElement(&quot;div&quot;,null,&quot;T&quot;),a.default.createElement(&quot;div&quot;,null,&quot;F&quot;),a.default.createElement(&quot;div&quot;,null,&quot;S&quot;),a.default.createElement(&quot;div&quot;,null,&quot;S&quot;)),a.default.createElement(&quot;div&quot;,{className:&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200&quot;},z.map((r,i)=&gt;a.default.createElement(&quot;button&quot;,{key:r.date,type:&quot;button&quot;,className:c(&quot;py-1.5 hover:bg-gray-100 focus:z-10&quot;,r.isCurrentMonth?&quot;bg-white&quot;:&quot;bg-gray-50&quot;,(r.isSelected||r.isToday)&amp;&amp;&quot;font-semibold&quot;,r.isSelected&amp;&amp;&quot;text-white&quot;,!r.isSelected&amp;&amp;r.isCurrentMonth&amp;&amp;!r.isToday&amp;&amp;&quot;text-gray-900&quot;,!r.isSelected&amp;&amp;!r.isCurrentMonth&amp;&amp;!r.isToday&amp;&amp;&quot;text-gray-400&quot;,r.isToday&amp;&amp;!r.isSelected&amp;&amp;&quot;text-indigo-600&quot;,i===0&amp;&amp;&quot;rounded-tl-lg&quot;,i===6&amp;&amp;&quot;rounded-tr-lg&quot;,i===z.length-7&amp;&amp;&quot;rounded-bl-lg&quot;,i===z.length-1&amp;&amp;&quot;rounded-br-lg&quot;)},a.default.createElement(&quot;time&quot;,{dateTime:r.date,className:c(&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;,r.isSelected&amp;&amp;r.isToday&amp;&amp;&quot;bg-indigo-600&quot;,r.isSelected&amp;&amp;!r.isToday&amp;&amp;&quot;bg-gray-900&quot;)},r.date.split(&quot;-&quot;).pop().replace(/^0/,&quot;&quot;))))))))}document.body.innerHTML=`
&lt;div class=&quot;h-0 min-h-[768px] bg-gray-50&quot;&gt;
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
`;H.default.render(a.default.createElement(V),document.getElementById(&quot;app&quot;));})();
&lt;/script&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-e5f12862f086eee6108f70ff74a502ff"
id="component-e5f12862f086eee6108f70ff74a502ff"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div&gt;\n &lt;header class=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022\&quot;&gt;2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot;&gt;&lt;\/span&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;div class=\&quot;relative\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot; id=\&quot;menu-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n Year view\n &lt;!-- Heroicon name: solid\/chevron-down --&gt;\n &lt;svg class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-0\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-1\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-2\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-item-3\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot;&gt;&lt;\/div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/dots-horizontal --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path d=\&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-2\&quot;&gt;Day view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-3\&quot;&gt;Week view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-4\&quot;&gt;Month view&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-5\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;bg-white\&quot;&gt;\n &lt;div class=\&quot;mx-auto grid max-w-3xl grid-cols-1 gap-x-8 gap-y-16 px-4 py-16 sm:grid-cols-2 sm:px-6 xl:max-w-none xl:grid-cols-3 xl:px-8 2xl:grid-cols-4\&quot;&gt;\n &lt;section class=\&quot;text-center\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;January&lt;\/h2&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;!--\n Always include: \&quot;py-1.5 hover:bg-gray-100 focus:z-10\&quot;\n Is current month, include: \&quot;bg-white text-gray-900\&quot;\n Is not current month, include: \&quot;bg-gray-50 text-gray-400\&quot;\n\n Top left day, include: \&quot;rounded-tl-lg\&quot;\n Top right day, include: \&quot;rounded-tr-lg\&quot;\n Bottom left day, include: \&quot;rounded-bl-lg\&quot;\n Bottom right day, include: \&quot;rounded-br-lg\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;!--\n Always include: \&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;\n Is today, include: \&quot;bg-indigo-600 font-semibold text-white\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-bl-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/section&gt;\n &lt;!-- More items... --&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment } from &#039;react&#039;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\n\nconst months = [\n {\n name: &#039;January&#039;,\n days: [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n ],\n },\n \/\/ More months...\n]\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n return (\n &lt;div&gt;\n &lt;header className=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 className=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time dateTime=\&quot;2022\&quot;&gt;2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div className=\&quot;flex items-center\&quot;&gt;\n &lt;div className=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;\n &gt;\n Today\n &lt;\/button&gt;\n &lt;span className=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative\&quot;&gt;\n &lt;Menu.Button\n type=\&quot;button\&quot;\n className=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;\n &gt;\n Year view\n &lt;ChevronDownIcon className=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;div className=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;\n &gt;\n Add event\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; className=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;Menu.Button className=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/Menu.Button&gt;\n\n &lt;Transition\n as={Fragment}\n enter=\&quot;transition ease-out duration-100\&quot;\n enterFrom=\&quot;transform opacity-0 scale-95\&quot;\n enterTo=\&quot;transform opacity-100 scale-100\&quot;\n leave=\&quot;transition ease-in duration-75\&quot;\n leaveFrom=\&quot;transform opacity-100 scale-100\&quot;\n leaveTo=\&quot;transform opacity-0 scale-95\&quot;\n &gt;\n &lt;Menu.Items className=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Create event\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Go to today\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;py-1\&quot;&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Day view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Week view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Month view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;Menu.Item&gt;\n {({ active }) =&gt; (\n &lt;a\n href=\&quot;#\&quot;\n className={classNames(\n active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;,\n &#039;block px-4 py-2 text-sm&#039;\n )}\n &gt;\n Year view\n &lt;\/a&gt;\n )}\n &lt;\/Menu.Item&gt;\n &lt;\/div&gt;\n &lt;\/Menu.Items&gt;\n &lt;\/Transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div className=\&quot;bg-white\&quot;&gt;\n &lt;div className=\&quot;mx-auto grid max-w-3xl grid-cols-1 gap-x-8 gap-y-16 px-4 py-16 sm:grid-cols-2 sm:px-6 xl:max-w-none xl:grid-cols-3 xl:px-8 2xl:grid-cols-4\&quot;&gt;\n {months.map((month) =&gt; (\n &lt;section key={month.name} className=\&quot;text-center\&quot;&gt;\n &lt;h2 className=\&quot;font-semibold text-gray-900\&quot;&gt;{month.name}&lt;\/h2&gt;\n &lt;div className=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n {month.days.map((day, dayIdx) =&gt; (\n &lt;button\n key={day.date}\n type=\&quot;button\&quot;\n className={classNames(\n day.isCurrentMonth ? &#039;bg-white text-gray-900&#039; : &#039;bg-gray-50 text-gray-400&#039;,\n dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;,\n dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;,\n dayIdx === month.days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;,\n dayIdx === month.days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;,\n &#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={classNames(\n day.isToday &amp;&amp; &#039;bg-indigo-600 font-semibold text-white&#039;,\n &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;\n )}\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n &lt;\/button&gt;\n ))}\n &lt;\/div&gt;\n &lt;\/section&gt;\n ))}\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div&gt;\n &lt;header class=\&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6\&quot;&gt;\n &lt;h1 class=\&quot;text-lg font-semibold text-gray-900\&quot;&gt;\n &lt;time datetime=\&quot;2022\&quot;&gt;2022&lt;\/time&gt;\n &lt;\/h1&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;div class=\&quot;flex items-center rounded-md shadow-sm md:items-stretch\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block\&quot;&gt;Today&lt;\/button&gt;\n &lt;span class=\&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;hidden md:ml-4 md:flex md:items-center\&quot;&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative\&quot;&gt;\n &lt;MenuButton type=\&quot;button\&quot; class=\&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50\&quot;&gt;\n Year view\n &lt;ChevronDownIcon class=\&quot;ml-2 h-5 w-5 text-gray-400\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;div class=\&quot;ml-6 h-6 w-px bg-gray-300\&quot; \/&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\&quot;&gt;Add event&lt;\/button&gt;\n &lt;\/div&gt;\n &lt;Menu as=\&quot;div\&quot; class=\&quot;relative ml-6 md:hidden\&quot;&gt;\n &lt;MenuButton class=\&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open menu&lt;\/span&gt;\n &lt;DotsHorizontalIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/MenuButton&gt;\n\n &lt;transition enter-active-class=\&quot;transition ease-out duration-100\&quot; enter-from-class=\&quot;transform opacity-0 scale-95\&quot; enter-to-class=\&quot;transform opacity-100 scale-100\&quot; leave-active-class=\&quot;transition ease-in duration-75\&quot; leave-from-class=\&quot;transform opacity-100 scale-100\&quot; leave-to-class=\&quot;transform opacity-0 scale-95\&quot;&gt;\n &lt;MenuItems class=\&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Create event&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Go to today&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-1\&quot;&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Day view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Week view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Month view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;MenuItem v-slot=\&quot;{ active }\&quot;&gt;\n &lt;a href=\&quot;#\&quot; :class=\&quot;[active ? &#039;bg-gray-100 text-gray-900&#039; : &#039;text-gray-700&#039;, &#039;block px-4 py-2 text-sm&#039;]\&quot;&gt;Year view&lt;\/a&gt;\n &lt;\/MenuItem&gt;\n &lt;\/div&gt;\n &lt;\/MenuItems&gt;\n &lt;\/transition&gt;\n &lt;\/Menu&gt;\n &lt;\/div&gt;\n &lt;\/header&gt;\n &lt;div class=\&quot;bg-white\&quot;&gt;\n &lt;div class=\&quot;mx-auto grid max-w-3xl grid-cols-1 gap-x-8 gap-y-16 px-4 py-16 sm:grid-cols-2 sm:px-6 xl:max-w-none xl:grid-cols-3 xl:px-8 2xl:grid-cols-4\&quot;&gt;\n &lt;section v-for=\&quot;month in months\&quot; :key=\&quot;month.name\&quot; class=\&quot;text-center\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;{{ month.name }}&lt;\/h2&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;button v-for=\&quot;(day, dayIdx) in month.days\&quot; :key=\&quot;day.date\&quot; type=\&quot;button\&quot; :class=\&quot;[day.isCurrentMonth ? &#039;bg-white text-gray-900&#039; : &#039;bg-gray-50 text-gray-400&#039;, dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;, dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;, dayIdx === month.days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;, dayIdx === month.days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;, &#039;py-1.5 hover:bg-gray-100 focus:z-10&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;[day.isToday &amp;&amp; &#039;bg-indigo-600 font-semibold text-white&#039;, &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;]\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/section&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from &#039;@heroicons\/vue\/solid&#039;\nimport { Menu, MenuButton, MenuItem, MenuItems } from &#039;@headlessui\/vue&#039;\n\nconst months = [\n {\n name: &#039;January&#039;,\n days: [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n ],\n },\n \/\/ More months...\n]\n\nexport default {\n components: {\n Menu,\n MenuButton,\n MenuItem,\n MenuItems,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n },\n setup() {\n return {\n months,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-e5f12862f086eee6108f70ff74a502ff" class="font-medium text-gray-900 truncate">
<a href="#component-e5f12862f086eee6108f70ff74a502ff" class="mr-1">Year view</a>
</h2>
<span class="hidden lg:block flex-none uppercase bg-gray-200 text-gray-600 text-xs tracking-wide font-semibold px-2 py-1 rounded-md ml-3">
Requires <abbr title="JavaScript">JS</abbr>
</span>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-e5f12862f086eee6108f70ff74a502ff {
height: 900px;
}
@media (min-width: 704px) {
#frame-e5f12862f086eee6108f70ff74a502ff {
height: 900px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-e5f12862f086eee6108f70ff74a502ff" class="bg-white">
<iframe x-ref="iframe" title="Year view preview" aria-label="Year view preview" name="frame-e5f12862f086eee6108f70ff74a502ff" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/components-v2.js?id=c08ed7087921a2a8b1bfe052e9ed5b36&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;script src=&quot;/js/alpine.js?id=aec657470ad97cbba5c2659fd719c2de&quot; defer&gt;&lt;/script&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;div class=&quot;&quot; style=&quot;&quot;&gt;
&lt;div class=&quot;h-[900px] overflow-y-auto bg-gray-50&quot;&gt;
&lt;div&gt;
&lt;header class=&quot;relative z-20 flex items-center justify-between border-b border-gray-200 py-4 px-6&quot;&gt;
&lt;h1 class=&quot;text-lg font-semibold text-gray-900&quot;&gt;
&lt;time datetime=&quot;2022&quot;&gt;2022&lt;/time&gt;
&lt;/h1&gt;
&lt;div class=&quot;flex items-center&quot;&gt;
&lt;div class=&quot;flex items-center rounded-md shadow-sm md:items-stretch&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Previous month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-left&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block&quot;&gt;Today&lt;/button&gt;
&lt;span class=&quot;relative -mx-px h-5 w-px bg-gray-300 md:hidden&quot;&gt;&lt;/span&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Next month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-right&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;hidden md:ml-4 md:flex md:items-center&quot;&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;relative&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50&quot; id=&quot;menu-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
Year view
&lt;svg class=&quot;ml-2 h-5 w-5 text-gray-400&quot; x-description=&quot;Heroicon name: solid/chevron-down&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Day view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Week view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 2, &#039;text-gray-700&#039;: !(activeIndex === 2) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-2&quot; @mouseenter=&quot;activeIndex = 2&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Month view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 3, &#039;text-gray-700&#039;: !(activeIndex === 3) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-item-3&quot; @mouseenter=&quot;activeIndex = 3&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Year view&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;ml-6 h-6 w-px bg-gray-300&quot;&gt;&lt;/div&gt;
&lt;button type=&quot;button&quot; class=&quot;focus:outline-none ml-6 rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2&quot;&gt;Add event&lt;/button&gt;
&lt;/div&gt;
&lt;div x-data=&quot;Components.menu({ open: false })&quot; x-init=&quot;init()&quot; @keydown.escape.stop=&quot;open = false; focusButton()&quot; @click.away=&quot;onClickAway($event)&quot; class=&quot;relative ml-6 md:hidden&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500&quot; id=&quot;menu-0-button&quot; x-ref=&quot;button&quot; @click=&quot;onButtonClick()&quot; @keyup.space.prevent=&quot;onButtonEnter()&quot; @keydown.enter.prevent=&quot;onButtonEnter()&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; x-bind:aria-expanded=&quot;open.toString()&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Open menu&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/dots-horizontal&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path d=&quot;M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div x-show=&quot;open&quot; x-transition:enter=&quot;transition ease-out duration-100&quot; x-transition:enter-start=&quot;transform opacity-0 scale-95&quot; x-transition:enter-end=&quot;transform opacity-100 scale-100&quot; x-transition:leave=&quot;transition ease-in duration-75&quot; x-transition:leave-start=&quot;transform opacity-100 scale-100&quot; x-transition:leave-end=&quot;transform opacity-0 scale-95&quot; class=&quot;focus:outline-none absolute right-0 mt-3 w-36 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5&quot; x-ref=&quot;menu-items&quot; x-description=&quot;Dropdown menu, show/hide based on menu state.&quot; x-bind:aria-activedescendant=&quot;activeDescendant&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;menu-0-button&quot; tabindex=&quot;-1&quot; @keydown.arrow-up.prevent=&quot;onArrowUp()&quot; @keydown.arrow-down.prevent=&quot;onArrowDown()&quot; @keydown.tab=&quot;open = false&quot; @keydown.enter.prevent=&quot;open = false; focusButton()&quot; @keyup.space.prevent=&quot;open = false; focusButton()&quot;&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; x-state:on=&quot;Active&quot; x-state:off=&quot;Not Active&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 0, &#039;text-gray-700&#039;: !(activeIndex === 0) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-0&quot; @mouseenter=&quot;activeIndex = 0&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Create event&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 1, &#039;text-gray-700&#039;: !(activeIndex === 1) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-1&quot; @mouseenter=&quot;activeIndex = 1&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Go to today&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;py-1&quot; role=&quot;none&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 2, &#039;text-gray-700&#039;: !(activeIndex === 2) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-2&quot; @mouseenter=&quot;activeIndex = 2&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Day view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 3, &#039;text-gray-700&#039;: !(activeIndex === 3) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-3&quot; @mouseenter=&quot;activeIndex = 3&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Week view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 4, &#039;text-gray-700&#039;: !(activeIndex === 4) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-4&quot; @mouseenter=&quot;activeIndex = 4&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Month view&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;text-gray-700 block px-4 py-2 text-sm&quot; :class=&quot;{ &#039;bg-gray-100 text-gray-900&#039;: activeIndex === 5, &#039;text-gray-700&#039;: !(activeIndex === 5) }&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot; id=&quot;menu-0-item-5&quot; @mouseenter=&quot;activeIndex = 5&quot; @mouseleave=&quot;activeIndex = -1&quot; @click=&quot;open = false; focusButton()&quot;&gt;Year view&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;bg-white&quot;&gt;
&lt;div class=&quot;mx-auto grid max-w-3xl grid-cols-1 gap-x-8 gap-y-16 px-4 py-16 sm:grid-cols-2 sm:px-6 xl:max-w-none xl:grid-cols-3 xl:px-8 2xl:grid-cols-4&quot; x-max=&quot;1&quot;&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;January&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200&quot;&gt;
&lt;!--
Always include: &quot;py-1.5 hover:bg-gray-100 focus:z-10&quot;
Is current month, include: &quot;bg-white text-gray-900&quot;
Is not current month, include: &quot;bg-gray-50 text-gray-400&quot;
Top left day, include: &quot;rounded-tl-lg&quot;
Top right day, include: &quot;rounded-tr-lg&quot;
Bottom left day, include: &quot;rounded-bl-lg&quot;
Bottom right day, include: &quot;rounded-br-lg&quot;
--&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;!--
Always include: &quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;
Is today, include: &quot;bg-indigo-600 font-semibold text-white&quot;
--&gt;
&lt;time datetime=&quot;2021-12-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;February&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;March&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;April&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;May&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-04-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;June&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-05-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;July&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-06-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-07-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;August&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;September&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-08-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;October&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-09-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;November&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-10-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;December&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm text-gray-900 shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-11-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-tr-lg bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-white py-1.5 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-12-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2023-01-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-3d940888b49b624701d5343b67536107"
id="component-3d940888b49b624701d5343b67536107"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div&gt;\n &lt;div class=\&quot;relative grid grid-cols-1 gap-x-14 md:grid-cols-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;section class=\&quot;text-center\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;January&lt;\/h2&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;!--\n Always include: \&quot;py-1.5 hover:bg-gray-100 focus:z-10\&quot;\n Is current month, include: \&quot;bg-white text-gray-900\&quot;\n Is not current month, include: \&quot;bg-gray-50 text-gray-400\&quot;\n\n Top left day, include: \&quot;rounded-tl-lg\&quot;\n Top right day, include: \&quot;rounded-tr-lg\&quot;\n Bottom left day, include: \&quot;rounded-bl-lg\&quot;\n Bottom right day, include: \&quot;rounded-br-lg\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;!--\n Always include: \&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;\n Is today, include: \&quot;bg-indigo-600 font-semibold text-white\&quot;\n --&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-bl-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/section&gt;\n &lt;section class=\&quot;hidden text-center md:block\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;February&lt;\/h2&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-14\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-15\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-16\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-17\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-18\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-19\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-20\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-21\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-22\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-23\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-24\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-25\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-26\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-27\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-28\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-01\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-02\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-03\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-04\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-05\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-06\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-07\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-08\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-09\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-10\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-11\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-12\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;relative rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10\&quot;&gt;\n &lt;time datetime=\&quot;2022-03-13\&quot; class=\&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/section&gt;\n &lt;\/div&gt;\n &lt;section class=\&quot;mt-12\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;Upcoming events&lt;\/h2&gt;\n &lt;ol class=\&quot;mt-2 divide-y divide-gray-200 text-sm leading-6 text-gray-500\&quot;&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Wed, Jan 12&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto sm:mt-0\&quot;&gt;Nothing on today\u2019s schedule&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Thu, Jan 13&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;View house with real estate agent&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;&lt;time datetime=\&quot;2022-01-13T14:30\&quot;&gt;2:30 PM&lt;\/time&gt; - &lt;time datetime=\&quot;2022-01-13T16:30\&quot;&gt;4:30 PM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Fri, Jan 14&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Meeting with bank manager&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;All day&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Mon, Jan 17&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Sign paperwork at lawyers&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;&lt;time datetime=\&quot;2022-01-17T10:00\&quot;&gt;10:00 AM&lt;\/time&gt; - &lt;time datetime=\&quot;2022-01-17T10:15\&quot;&gt;10:15 AM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/section&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { ChevronLeftIcon, ChevronRightIcon } from &#039;@heroicons\/react\/solid&#039;\n\nconst months = [\n {\n name: &#039;January&#039;,\n days: [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n ],\n },\n {\n name: &#039;February&#039;,\n days: [\n { date: &#039;2022-01-31&#039; },\n { date: &#039;2022-02-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-12&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-03-01&#039; },\n { date: &#039;2022-03-02&#039; },\n { date: &#039;2022-03-03&#039; },\n { date: &#039;2022-03-04&#039; },\n { date: &#039;2022-03-05&#039; },\n { date: &#039;2022-03-06&#039; },\n { date: &#039;2022-03-07&#039; },\n { date: &#039;2022-03-08&#039; },\n { date: &#039;2022-03-09&#039; },\n { date: &#039;2022-03-10&#039; },\n { date: &#039;2022-03-11&#039; },\n { date: &#039;2022-03-12&#039; },\n { date: &#039;2022-03-13&#039; },\n ],\n },\n]\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n return (\n &lt;div&gt;\n &lt;div className=\&quot;relative grid grid-cols-1 gap-x-14 md:grid-cols-2\&quot;&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n {months.map((month, monthIdx) =&gt; (\n &lt;section\n key={monthIdx}\n className={classNames(monthIdx === months.length - 1 &amp;&amp; &#039;hidden md:block&#039;, &#039;text-center&#039;)}\n &gt;\n &lt;h2 className=\&quot;font-semibold text-gray-900\&quot;&gt;{month.name}&lt;\/h2&gt;\n &lt;div className=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div className=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n {month.days.map((day, dayIdx) =&gt; (\n &lt;button\n key={day.date}\n type=\&quot;button\&quot;\n className={classNames(\n day.isCurrentMonth ? &#039;bg-white text-gray-900&#039; : &#039;bg-gray-50 text-gray-400&#039;,\n dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;,\n dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;,\n dayIdx === month.days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;,\n dayIdx === month.days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;,\n &#039;relative py-1.5 hover:bg-gray-100 focus:z-10&#039;\n )}\n &gt;\n &lt;time\n dateTime={day.date}\n className={classNames(\n day.isToday &amp;&amp; &#039;bg-indigo-600 font-semibold text-white&#039;,\n &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;\n )}\n &gt;\n {day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;)}\n &lt;\/time&gt;\n &lt;\/button&gt;\n ))}\n &lt;\/div&gt;\n &lt;\/section&gt;\n ))}\n &lt;\/div&gt;\n &lt;section className=\&quot;mt-12\&quot;&gt;\n &lt;h2 className=\&quot;font-semibold text-gray-900\&quot;&gt;Upcoming events&lt;\/h2&gt;\n &lt;ol className=\&quot;mt-2 divide-y divide-gray-200 text-sm leading-6 text-gray-500\&quot;&gt;\n &lt;li className=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-17\&quot; className=\&quot;w-28 flex-none\&quot;&gt;\n Wed, Jan 12\n &lt;\/time&gt;\n &lt;p className=\&quot;mt-2 flex-auto sm:mt-0\&quot;&gt;Nothing on today\u2019s schedule&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-19\&quot; className=\&quot;w-28 flex-none\&quot;&gt;\n Thu, Jan 13\n &lt;\/time&gt;\n &lt;p className=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;View house with real estate agent&lt;\/p&gt;\n &lt;p className=\&quot;flex-none sm:ml-6\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-13T14:30\&quot;&gt;2:30 PM&lt;\/time&gt; - &lt;time dateTime=\&quot;2022-01-13T16:30\&quot;&gt;4:30 PM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-20\&quot; className=\&quot;w-28 flex-none\&quot;&gt;\n Fri, Jan 14\n &lt;\/time&gt;\n &lt;p className=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Meeting with bank manager&lt;\/p&gt;\n &lt;p className=\&quot;flex-none sm:ml-6\&quot;&gt;All day&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li className=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-18\&quot; className=\&quot;w-28 flex-none\&quot;&gt;\n Mon, Jan 17\n &lt;\/time&gt;\n &lt;p className=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Sign paperwork at lawyers&lt;\/p&gt;\n &lt;p className=\&quot;flex-none sm:ml-6\&quot;&gt;\n &lt;time dateTime=\&quot;2022-01-17T10:00\&quot;&gt;10:00 AM&lt;\/time&gt; - &lt;time dateTime=\&quot;2022-01-17T10:15\&quot;&gt;10:15 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/section&gt;\n &lt;\/div&gt;\n )\n}\n&quot;},{&quot;language&quot;:&quot;vue&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;Vue&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;template&gt;\n &lt;div&gt;\n &lt;div class=\&quot;relative grid grid-cols-1 gap-x-14 md:grid-cols-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;ChevronRightIcon class=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;section v-for=\&quot;(month, monthIdx) in months\&quot; :key=\&quot;monthIdx\&quot; :class=\&quot;[monthIdx === months.length - 1 &amp;&amp; &#039;hidden md:block&#039;, &#039;text-center&#039;]\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;{{ month.name }}&lt;\/h2&gt;\n &lt;div class=\&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200\&quot;&gt;\n &lt;button v-for=\&quot;(day, dayIdx) in month.days\&quot; :key=\&quot;day.date\&quot; type=\&quot;button\&quot; :class=\&quot;[day.isCurrentMonth ? &#039;bg-white text-gray-900&#039; : &#039;bg-gray-50 text-gray-400&#039;, dayIdx === 0 &amp;&amp; &#039;rounded-tl-lg&#039;, dayIdx === 6 &amp;&amp; &#039;rounded-tr-lg&#039;, dayIdx === month.days.length - 7 &amp;&amp; &#039;rounded-bl-lg&#039;, dayIdx === month.days.length - 1 &amp;&amp; &#039;rounded-br-lg&#039;, &#039;relative py-1.5 hover:bg-gray-100 focus:z-10&#039;]\&quot;&gt;\n &lt;time :datetime=\&quot;day.date\&quot; :class=\&quot;[day.isToday &amp;&amp; &#039;bg-indigo-600 font-semibold text-white&#039;, &#039;mx-auto flex h-7 w-7 items-center justify-center rounded-full&#039;]\&quot;&gt;{{ day.date.split(&#039;-&#039;).pop().replace(\/^0\/, &#039;&#039;) }}&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/section&gt;\n &lt;\/div&gt;\n &lt;section class=\&quot;mt-12\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;Upcoming events&lt;\/h2&gt;\n &lt;ol class=\&quot;mt-2 divide-y divide-gray-200 text-sm leading-6 text-gray-500\&quot;&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Wed, Jan 12&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto sm:mt-0\&quot;&gt;Nothing on today\u2019s schedule&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Thu, Jan 13&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;View house with real estate agent&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13T14:30\&quot;&gt;2:30 PM&lt;\/time&gt; -\n &lt;time datetime=\&quot;2022-01-13T16:30\&quot;&gt;4:30 PM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Fri, Jan 14&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Meeting with bank manager&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;All day&lt;\/p&gt;\n &lt;\/li&gt;\n &lt;li class=\&quot;py-4 sm:flex\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot; class=\&quot;w-28 flex-none\&quot;&gt;Mon, Jan 17&lt;\/time&gt;\n &lt;p class=\&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0\&quot;&gt;Sign paperwork at lawyers&lt;\/p&gt;\n &lt;p class=\&quot;flex-none sm:ml-6\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17T10:00\&quot;&gt;10:00 AM&lt;\/time&gt; -\n &lt;time datetime=\&quot;2022-01-17T10:15\&quot;&gt;10:15 AM&lt;\/time&gt;\n &lt;\/p&gt;\n &lt;\/li&gt;\n &lt;\/ol&gt;\n &lt;\/section&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { ChevronLeftIcon, ChevronRightIcon } from &#039;@heroicons\/vue\/solid&#039;\n\nconst months = [\n {\n name: &#039;January&#039;,\n days: [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n ],\n },\n {\n name: &#039;February&#039;,\n days: [\n { date: &#039;2022-01-31&#039; },\n { date: &#039;2022-02-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-12&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-21&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-03-01&#039; },\n { date: &#039;2022-03-02&#039; },\n { date: &#039;2022-03-03&#039; },\n { date: &#039;2022-03-04&#039; },\n { date: &#039;2022-03-05&#039; },\n { date: &#039;2022-03-06&#039; },\n { date: &#039;2022-03-07&#039; },\n { date: &#039;2022-03-08&#039; },\n { date: &#039;2022-03-09&#039; },\n { date: &#039;2022-03-10&#039; },\n { date: &#039;2022-03-11&#039; },\n { date: &#039;2022-03-12&#039; },\n { date: &#039;2022-03-13&#039; },\n ],\n },\n]\n\nexport default {\n components: {\n ChevronLeftIcon,\n ChevronRightIcon,\n },\n setup() {\n return {\n months,\n }\n },\n}\n&lt;\/script&gt;&quot;}] })"
x-init="init()"
>
<div class="flex items-center mb-3 whitespace-nowrap">
<h2 id="heading-3d940888b49b624701d5343b67536107" class="font-medium text-gray-900 truncate">
<a href="#component-3d940888b49b624701d5343b67536107" class="mr-1">Double</a>
</h2>
<div class="flex-none flex items-center ml-auto pl-4 sm:pl-6">
<div class="group p-0.5 rounded-lg flex bg-gray-100 hover:bg-gray-200">
<button x-ref="preview" type="button" class="flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100" @click="activeTab = 'preview'" :tabindex="activeTab === 'preview' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'code'" @keydown.arrow-right="activeTab = 'code'">
<span x-show="false" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium bg-white shadow-sm ring-1 ring-black ring-opacity-5">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2 text-teal-500">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-900 sr-only lg:not-sr-only">Preview</span>
</span>
<span x-show="true" style="display:none" class="p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium" :class="activeTab === 'preview' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'preview' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M17.25 10c0 1-1.75 6.25-7.25 6.25S2.75 11 2.75 10 4.5 3.75 10 3.75 17.25 9 17.25 10z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="10" r="2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'preview' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Preview</span>
</span>
</button>
<button x-ref="code" type="button" class="ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100" :class="activeTab === 'code' ? 'bg-white shadow-sm ring-1 ring-black ring-opacity-5' : ''" @click="activeTab = 'code'" tabindex="-1" :tabindex="activeTab === 'code' ? '0' : '-1'" @keydown.arrow-left="activeTab = 'preview'" @keydown.arrow-right="activeTab = 'preview'">
<svg aria-hidden="true" width="20" height="20" fill="none" class="lg:mr-2" :class="activeTab === 'code' ? 'text-teal-500' : 'text-gray-500 group-hover:text-gray-900'">
<path d="M13.75 6.75l3.5 3.25-3.5 3.25M6.25 13.25L2.75 10l3.5-3.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sr-only lg:not-sr-only" :class="activeTab === 'code' ? 'text-gray-900' : 'text-gray-600 group-hover:text-gray-900'">Code</span>
</button>
</div>
<div class="hidden sm:block w-px h-6 bg-gray-200 ml-6"></div>
<div class="relative hidden sm:block ml-2.5">
<div x-show="false" aria-hidden="true">
<div class="absolute inset-0">
<select tabindex="-1" class="placeholder-html bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>HTML</option>
</select>
<select tabindex="-1" class="placeholder-react bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>React</option>
</select>
<select tabindex="-1" class="placeholder-vue bg-transparent text-gray-900 rounded-none border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium pointer-events-none" style="background-image:none;">
<option>Vue</option>
</select>
</div>
</div>
<div style="opacity:0" :style="'opacity:1'">
<select x-model="activeSnippet" class="bg-transparent text-gray-900 rounded-lg border-0 form-select p-0 pl-3.5 pr-[1.875rem] h-9 w-full sm:text-sm font-medium focus:shadow-none focus-visible:ring-2 focus-visible:ring-teal-500" style="background-image:none;">
<option value="html">HTML</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</div>
<svg aria-hidden="true" viewBox="0 0 8 6" width="8" height="6" fill="none" class="absolute inset-y-0 right-3.5 h-full pointer-events-none">
<path d="M7 1.5l-3 3-3-3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<button type="button" class="hidden sm:flex sm:items-center sm:justify-center relative w-9 h-9 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 text-gray-400 hover:text-gray-600 group ml-2.5" :style="copied ? 'color:#06B6D4' : ''" @click="navigator.clipboard.writeText(snippets.find(s=>s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
<span class="sr-only">Copy code</span>
<span x-show="copied" style="display:none" class="absolute inset-x-0 bottom-full mb-2.5 flex justify-center" x-transition:enter="transform ease-out duration-200 transition origin-bottom" x-transition:enter-start="scale-95 translate-y-0.5 opacity-0" x-transition:enter-end="scale-100 translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<span class="bg-gray-900 text-white rounded-md text-[0.625rem] leading-4 tracking-wide font-semibold uppercase py-1 px-3 filter drop-shadow-md">
<svg aria-hidden="true" width="16" height="6" viewBox="0 0 16 6" class="text-gray-900 absolute top-full left-1/2 -mt-px -ml-2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z" fill="currentColor"/>
</svg>
Copied!
</span>
</span>
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none" class="stroke-current transform group-hover:rotate-[-4deg] transition" :style="copied ? '--tw-rotate:-8deg;' : ''">
<path d="M12.9975 10.7499L11.7475 10.7499C10.6429 10.7499 9.74747 11.6453 9.74747 12.7499L9.74747 21.2499C9.74747 22.3544 10.6429 23.2499 11.7475 23.2499L20.2475 23.2499C21.352 23.2499 22.2475 22.3544 22.2475 21.2499L22.2475 12.7499C22.2475 11.6453 21.352 10.7499 20.2475 10.7499L18.9975 10.7499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.9975 12.2499L13.9975 12.2499C13.4452 12.2499 12.9975 11.8022 12.9975 11.2499L12.9975 9.74988C12.9975 9.19759 13.4452 8.74988 13.9975 8.74988L17.9975 8.74988C18.5498 8.74988 18.9975 9.19759 18.9975 9.74988L18.9975 11.2499C18.9975 11.8022 18.5498 12.2499 17.9975 12.2499Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 16.2499L18.2475 16.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7475 19.2499L18.2475 19.2499" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<g x-cloak :class="[copied ? '' : 'opacity-0', initialized ? 'transition-opacity' : '']">
<path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</button>
</div>
</div>
<style>#frame-3d940888b49b624701d5343b67536107 {
height: 960px;
}
@media (min-width: 704px) {
#frame-3d940888b49b624701d5343b67536107 {
height: 760px;
}
}
</style>
<div class="relative bg-gray-500 rounded-lg ring-1 ring-gray-900 ring-opacity-5 overflow-hidden">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="min-w-full sm:min-w-[392px] relative sm:pr-4">
<div id="frame-3d940888b49b624701d5343b67536107" class="bg-white">
<iframe x-ref="iframe" title="Double preview" aria-label="Double preview" name="frame-3d940888b49b624701d5343b67536107" class="w-full rounded-lg overflow-hidden sm:rounded-r-none" srcdoc="&lt;!doctype html&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/components-v2.css?id=008e3cd853f4d76f553263274b05071e&quot;&gt;&lt;script src=&quot;/js/components-v2.js?id=c08ed7087921a2a8b1bfe052e9ed5b36&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/js/iframe.js?id=165e0af3d723efd6d5d88c7ff17ca86a&quot; defer&gt;&lt;/script&gt;&lt;script src=&quot;/js/alpine.js?id=aec657470ad97cbba5c2659fd719c2de&quot; defer&gt;&lt;/script&gt;&lt;body class=&quot;antialiased font-sans bg-gray-200 overflow-hidden&quot;&gt;&lt;div class=&quot;&quot; style=&quot;&quot;&gt;
&lt;div class=&quot;bg-gray-50 px-4 py-16&quot;&gt;
&lt;div class=&quot;mx-auto max-w-lg md:max-w-3xl&quot;&gt;
&lt;div&gt;
&lt;div class=&quot;relative grid grid-cols-1 gap-x-14 md:grid-cols-2&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Previous month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-left&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;absolute -top-1 -right-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Next month&lt;/span&gt;
&lt;svg class=&quot;h-5 w-5&quot; x-description=&quot;Heroicon name: solid/chevron-right&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;section class=&quot;text-center&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;January&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200&quot;&gt;
&lt;!--
Always include: &quot;py-1.5 hover:bg-gray-100 focus:z-10&quot;
Is current month, include: &quot;bg-white text-gray-900&quot;
Is not current month, include: &quot;bg-gray-50 text-gray-400&quot;
Top left day, include: &quot;rounded-tl-lg&quot;
Top right day, include: &quot;rounded-tr-lg&quot;
Bottom left day, include: &quot;rounded-bl-lg&quot;
Bottom right day, include: &quot;rounded-br-lg&quot;
--&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;!--
Always include: &quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;
Is today, include: &quot;bg-indigo-600 font-semibold text-white&quot;
--&gt;
&lt;time datetime=&quot;2021-12-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2021-12-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-29&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;29&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-30&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;30&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-bl-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;hidden text-center md:block&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;February&lt;/h2&gt;
&lt;div class=&quot;mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500&quot;&gt;
&lt;div&gt;M&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;W&lt;/div&gt;
&lt;div&gt;T&lt;/div&gt;
&lt;div&gt;F&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;div&gt;S&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-01-31&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;31&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-tr-lg bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-14&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;14&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-15&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;15&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-16&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;16&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-17&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;17&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-18&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;18&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-19&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;19&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-20&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;20&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-21&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;21&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-22&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;22&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-23&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;23&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-24&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;24&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-25&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;25&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-26&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;26&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-27&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;27&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-02-28&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;28&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-01&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;1&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-02&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;2&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-03&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;3&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-04&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;4&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-05&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;5&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-06&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;6&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-bl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-07&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;7&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-08&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;8&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-09&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;9&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-10&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;10&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-11&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;11&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-12&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;12&lt;/time&gt;
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;relative rounded-br-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10&quot;&gt;
&lt;time datetime=&quot;2022-03-13&quot; class=&quot;mx-auto flex h-7 w-7 items-center justify-center rounded-full&quot;&gt;13&lt;/time&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;section class=&quot;mt-12&quot;&gt;
&lt;h2 class=&quot;font-semibold text-gray-900&quot;&gt;Upcoming events&lt;/h2&gt;
&lt;ol class=&quot;mt-2 divide-y divide-gray-200 text-sm leading-6 text-gray-500&quot;&gt;
&lt;li class=&quot;py-4 sm:flex&quot;&gt;
&lt;time datetime=&quot;2022-01-17&quot; class=&quot;w-28 flex-none&quot;&gt;Wed, Jan 12&lt;/time&gt;
&lt;p class=&quot;mt-2 flex-auto sm:mt-0&quot;&gt;Nothing on today’s schedule&lt;/p&gt;
&lt;/li&gt;
&lt;li class=&quot;py-4 sm:flex&quot;&gt;
&lt;time datetime=&quot;2022-01-19&quot; class=&quot;w-28 flex-none&quot;&gt;Thu, Jan 13&lt;/time&gt;
&lt;p class=&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0&quot;&gt;View house with real estate agent&lt;/p&gt;
&lt;p class=&quot;flex-none sm:ml-6&quot;&gt;&lt;time datetime=&quot;2022-01-13T14:30&quot;&gt;2:30 PM&lt;/time&gt; - &lt;time datetime=&quot;2022-01-13T16:30&quot;&gt;4:30 PM&lt;/time&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li class=&quot;py-4 sm:flex&quot;&gt;
&lt;time datetime=&quot;2022-01-20&quot; class=&quot;w-28 flex-none&quot;&gt;Fri, Jan 14&lt;/time&gt;
&lt;p class=&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0&quot;&gt;Meeting with bank manager&lt;/p&gt;
&lt;p class=&quot;flex-none sm:ml-6&quot;&gt;All day&lt;/p&gt;
&lt;/li&gt;
&lt;li class=&quot;py-4 sm:flex&quot;&gt;
&lt;time datetime=&quot;2022-01-18&quot; class=&quot;w-28 flex-none&quot;&gt;Mon, Jan 17&lt;/time&gt;
&lt;p class=&quot;mt-2 flex-auto font-semibold text-gray-900 sm:mt-0&quot;&gt;Sign paperwork at lawyers&lt;/p&gt;
&lt;p class=&quot;flex-none sm:ml-6&quot;&gt;&lt;time datetime=&quot;2022-01-17T10:00&quot;&gt;10:00 AM&lt;/time&gt; - &lt;time datetime=&quot;2022-01-17T10:15&quot;&gt;10:15 AM&lt;/time&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/body&gt;" style="opacity:0"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 pointer-events-none sm:block"></div>
<div x-ref="handle" @pointerdown="onResizeStart($event)" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4 cursor-[ew-resize]" style="touch-action: none">
<div class="absolute inset-y-0 -inset-x-2"></div>
<svg aria-hidden="true" class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z" />
</svg>
</div>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden bg-gray-800">
<ul role="list" class="flex sm:hidden px-4 border-b border-gray-700 space-x-2">
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'html' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'html' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'html'">HTML</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'react' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'react' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'react'">React</button>
</li>
<li class="py-1 border-b -mb-px" :class="activeSnippet === 'vue' ? 'border-teal-400' : 'border-transparent'">
<button type="button" class="text-sm font-medium p-2" :class="activeSnippet === 'vue' ? 'text-teal-400' : 'text-gray-400'" @click="activeSnippet = 'vue'">Vue</button>
</li>
</ul>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'html', 'hidden': activeSnippet !== 'html' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockhtml"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'react', 'hidden': activeSnippet !== 'react' }" class="language-jsx block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockreact"></code></pre>
<pre @copy="onCopy($event)" :class="{'block': activeSnippet === 'vue', 'hidden': activeSnippet !== 'vue' }" class="language-html block scrollbar-none m-0 p-0 overflow-auto text-white text-sm leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased" x-ref="codeBlockvue"></code></pre>
</div>
</div>
</section>
<section
aria-labelledby="heading-b59d3a98c34e60d43c8972caa08618a5"
id="component-b59d3a98c34e60d43c8972caa08618a5"
x-data="componentPreview({ userId: 22492, languages: [&quot;html&quot;,&quot;react&quot;,&quot;vue&quot;], activeSnippet: getActiveSnippet(), snippets: [{&quot;language&quot;:&quot;html&quot;,&quot;highlight&quot;:&quot;html&quot;,&quot;label&quot;:&quot;HTML&quot;,&quot;snippet&quot;:&quot;&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;\n&lt;div&gt;\n &lt;div class=\&quot;flex items-center\&quot;&gt;\n &lt;h2 class=\&quot;flex-auto font-semibold text-gray-900\&quot;&gt;January 2022&lt;\/h2&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-left --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-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\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Next month&lt;\/span&gt;\n &lt;!-- Heroicon name: solid\/chevron-right --&gt;\n &lt;svg class=\&quot;h-5 w-5\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 20 20\&quot; fill=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path fill-rule=\&quot;evenodd\&quot; d=\&quot;M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\&quot; clip-rule=\&quot;evenodd\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-10 grid grid-cols-7 text-center text-xs leading-6 text-gray-500\&quot;&gt;\n &lt;div&gt;M&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;W&lt;\/div&gt;\n &lt;div&gt;T&lt;\/div&gt;\n &lt;div&gt;F&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;div&gt;S&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;mt-2 grid grid-cols-7 text-sm\&quot;&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;!--\n Always include: \&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full\&quot;\n Is selected, include: \&quot;text-white\&quot;\n Is not selected and is today, include: \&quot;text-indigo-600\&quot;\n Is not selected and is not today and is current month, include: \&quot;text-gray-900\&quot;\n Is not selected and is not today and is not current month, include: \&quot;text-gray-400\&quot;\n Is selected and is today, include: \&quot;bg-indigo-600\&quot;\n Is selected and is not today, include: \&quot;bg-gray-900\&quot;\n Is not selected, include: \&quot;hover:bg-gray-200\&quot;\n Is selected or is today, include: \&quot;font-semibold\&quot;\n --&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-27\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-28\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-29\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-30\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2021-12-31\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-01\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-02\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-03\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-04\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-05\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-06\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-07\&quot;&gt;7&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-08\&quot;&gt;8&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-09\&quot;&gt;9&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-10\&quot;&gt;10&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-11\&quot;&gt;11&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full font-semibold text-indigo-600 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-12\&quot;&gt;12&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-13\&quot;&gt;13&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-14\&quot;&gt;14&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-15\&quot;&gt;15&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-16\&quot;&gt;16&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-17\&quot;&gt;17&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-18\&quot;&gt;18&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-19\&quot;&gt;19&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-20\&quot;&gt;20&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 font-semibold text-white\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-21\&quot;&gt;21&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-22\&quot;&gt;22&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-23\&quot;&gt;23&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-24\&quot;&gt;24&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-25\&quot;&gt;25&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-26\&quot;&gt;26&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-27\&quot;&gt;27&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-28\&quot;&gt;28&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-29\&quot;&gt;29&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-30\&quot;&gt;30&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-900 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-01-31\&quot;&gt;31&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-01\&quot;&gt;1&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-02\&quot;&gt;2&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-03\&quot;&gt;3&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-04\&quot;&gt;4&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-05\&quot;&gt;5&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;border-t border-gray-200 py-2\&quot;&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;mx-auto flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200\&quot;&gt;\n &lt;time datetime=\&quot;2022-02-06\&quot;&gt;6&lt;\/time&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;section class=\&quot;mt-12\&quot;&gt;\n &lt;h2 class=\&quot;font-semibold text-gray-900\&quot;&gt;Schedule for &lt;time datetime=\&quot;2022-01-21\&quot;&gt;January 21, 2022&lt;\/time&gt;&lt;\/h2&gt;\n &lt;ol class=\&quot;mt-4 space-y-1 text-sm leading-6 text-gray-500\&quot;&gt;\n &lt;li class=\&quot;group flex items-center space-x-4 rounded-xl py-2 px-4 focus-within:bg-gray-100 hover:bg-gray-100\&quot;&gt;\n &lt;img src=\&quot;https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80\&quot; alt=\&quot;\&quot; class=\&quot;h-10 w-10 flex-none rounded-full\&quot;&gt;\n &lt;div class=\&quot;flex-auto\&quot;&gt;\n &lt;p class=\&quot;text-gray-900\&quot;&gt;Leslie Alexander&lt;\/p&gt;\n &lt;p class=\&quot;mt-0.5\&quot;&gt;&lt;time datetime=\&quot;2022-01-21T13:00\&quot;&gt;1:00 PM&lt;\/time&gt; - &lt;time datetime=\&quot;2022-01-21T14:30\&quot;&gt;2:30 PM&lt;\/time&gt;&lt;\/p&gt;\n &lt;\/div&gt;\n &lt;div class=\&quot;relative opacity-0 focus-within:opacity-100 group-hover:opacity-100\&quot;&gt;\n &lt;div&gt;\n &lt;button type=\&quot;button\&quot; class=\&quot;-m-2 flex items-center rounded-full p-1.5 text-gray-500 hover:text-gray-600\&quot; id=\&quot;menu-0-button\&quot; aria-expanded=\&quot;false\&quot; aria-haspopup=\&quot;true\&quot;&gt;\n &lt;span class=\&quot;sr-only\&quot;&gt;Open options&lt;\/span&gt;\n &lt;!-- Heroicon name: outline\/dots-vertical --&gt;\n &lt;svg class=\&quot;h-6 w-6\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; fill=\&quot;none\&quot; viewBox=\&quot;0 0 24 24\&quot; stroke=\&quot;currentColor\&quot; aria-hidden=\&quot;true\&quot;&gt;\n &lt;path stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;2\&quot; d=\&quot;M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z\&quot; \/&gt;\n &lt;\/svg&gt;\n &lt;\/button&gt;\n &lt;\/div&gt;\n\n &lt;!--\n Dropdown menu, show\/hide based on menu state.\n\n Entering: \&quot;transition ease-out duration-100\&quot;\n From: \&quot;transform opacity-0 scale-95\&quot;\n To: \&quot;transform opacity-100 scale-100\&quot;\n Leaving: \&quot;transition ease-in duration-75\&quot;\n From: \&quot;transform opacity-100 scale-100\&quot;\n To: \&quot;transform opacity-0 scale-95\&quot;\n --&gt;\n &lt;div class=\&quot;focus:outline-none absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5\&quot; role=\&quot;menu\&quot; aria-orientation=\&quot;vertical\&quot; aria-labelledby=\&quot;menu-0-button\&quot; tabindex=\&quot;-1\&quot;&gt;\n &lt;div class=\&quot;py-1\&quot; role=\&quot;none\&quot;&gt;\n &lt;!-- Active: \&quot;bg-gray-100 text-gray-900\&quot;, Not Active: \&quot;text-gray-700\&quot; --&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-0\&quot;&gt;Edit&lt;\/a&gt;\n &lt;a href=\&quot;#\&quot; class=\&quot;text-gray-700 block px-4 py-2 text-sm\&quot; role=\&quot;menuitem\&quot; tabindex=\&quot;-1\&quot; id=\&quot;menu-0-item-1\&quot;&gt;Cancel&lt;\/a&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/li&gt;\n\n &lt;!-- More meetings... --&gt;\n &lt;\/ol&gt;\n &lt;\/section&gt;\n&lt;\/div&gt;\n&quot;},{&quot;language&quot;:&quot;react&quot;,&quot;highlight&quot;:&quot;jsx&quot;,&quot;label&quot;:&quot;React&quot;,&quot;snippet&quot;:&quot;\/* This example requires Tailwind CSS v2.0+ *\/\nimport { Fragment } from &#039;react&#039;\nimport { ChevronLeftIcon, ChevronRightIcon } from &#039;@heroicons\/react\/solid&#039;\nimport { Menu, Transition } from &#039;@headlessui\/react&#039;\nimport { DotsVerticalIcon } from &#039;@heroicons\/react\/outline&#039;\n\nconst days = [\n { date: &#039;2021-12-27&#039; },\n { date: &#039;2021-12-28&#039; },\n { date: &#039;2021-12-29&#039; },\n { date: &#039;2021-12-30&#039; },\n { date: &#039;2021-12-31&#039; },\n { date: &#039;2022-01-01&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-02&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-03&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-04&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-05&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-06&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-07&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-08&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-09&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-10&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-11&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-12&#039;, isCurrentMonth: true, isToday: true },\n { date: &#039;2022-01-13&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-14&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-15&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-16&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-17&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-18&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-19&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-20&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-21&#039;, isCurrentMonth: true, isSelected: true },\n { date: &#039;2022-01-22&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-23&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-24&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-25&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-26&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-27&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-28&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-29&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-30&#039;, isCurrentMonth: true },\n { date: &#039;2022-01-31&#039;, isCurrentMonth: true },\n { date: &#039;2022-02-01&#039; },\n { date: &#039;2022-02-02&#039; },\n { date: &#039;2022-02-03&#039; },\n { date: &#039;2022-02-04&#039; },\n { date: &#039;2022-02-05&#039; },\n { date: &#039;2022-02-06&#039; },\n]\nconst meetings = [\n {\n id: 1,\n name: &#039;Leslie Alexander&#039;,\n imageUrl:\n &#039;https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&#039;,\n start: &#039;1:00 PM&#039;,\n startDatetime: &#039;2022-01-21T13:00&#039;,\n end: &#039;2:30 PM&#039;,\n endDatetime: &#039;2022-01-21T14:30&#039;,\n },\n \/\/ More meetings...\n]\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(&#039; &#039;)\n}\n\nexport default function Example() {\n return (\n &lt;div&gt;\n &lt;div className=\&quot;flex items-center\&quot;&gt;\n &lt;h2 className=\&quot;flex-auto font-semibold text-gray-900\&quot;&gt;January 2022&lt;\/h2&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500\&quot;\n &gt;\n &lt;span className=\&quot;sr-only\&quot;&gt;Previous month&lt;\/span&gt;\n &lt;ChevronLeftIcon className=\&quot;h-5 w-5\&quot; aria-hidden=\&quot;true\&quot; \/&gt;\n &lt;\/button&gt;\n &lt;button\n type=\&quot;button\&quot;\n className=\&quot;-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hov
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment