<div class="h-[32rem]">
<div class="flex items-center justify-center w-full py-12 mx-auto">
<!--- When in use set x-data="{ open: false }" -->
<div x-data="{ open: true }" class="relative">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md gap-4"
aria-expanded="false"
@click="open = !open"
>
<span>Help Center</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down size-4"
slot="right-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 9l6 6l6 -6"></path>
</svg>
</button>
<div
x-show="open"
@click.away="open = false"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-1"
class="absolute z-10 flex w-screen px-4 mt-5 transition duration-200 ease-out -translate-x-1/2 left-1/2 max-w-max"
:class="{ 'opacity-0 translate-y-1': !open, 'opacity-100 translate-y-0': open }"
>
<div
class="flex-auto w-screen max-w-xs p-4 bg-white shadow-lg rounded-3xl ring-1 ring-base-900/5"
>
<div>
<a
class="text-sm leading-normal flex items-center w-full gap-2 group relative p-4 rounded-xl group hover:bg-base-50"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-refresh size-5 group-hover:text-accent-500"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
</svg>
<h3
class="text-base leading-normal text-base-900 font-medium group-hover:text-accent-500"
>
Sync across devices
</h3>
</a>
<a
class="text-sm leading-normal flex items-center w-full gap-2 group relative p-4 rounded-xl group hover:bg-base-50"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-external-file-dots size-5 group-hover:text-accent-500"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
></path>
<path d="M9 14v.01"></path>
<path d="M12 14v.01"></path>
<path d="M15 14v.01"></path>
</svg>
<h3
class="text-base leading-normal text-base-900 font-medium group-hover:text-accent-500"
>
Create custom documents
</h3>
</a>
<a
class="text-sm leading-normal flex items-center w-full gap-2 group relative p-4 rounded-xl group hover:bg-base-50"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-external-edit size-5 group-hover:text-accent-500"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
></path>
<path
d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
></path>
<path d="M16 5l3 3"></path>
</svg>
<h3
class="text-base leading-normal text-base-900 font-medium group-hover:text-accent-500"
>
Edit your files
</h3>
</a>
<a
class="text-sm leading-normal flex items-center w-full gap-2 group relative p-4 rounded-xl group hover:bg-base-50"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-external-brain size-5 group-hover:text-accent-500"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
></path>
<path
d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
></path>
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5"></path>
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0"></path>
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5"></path>
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10"></path>
</svg>
<h3
class="text-base leading-normal text-base-900 font-medium group-hover:text-accent-500"
>
Edit your files
</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
