Beta Pricing: Get it for $49 during the beta phase, including all features and future updates.
Home / Page 1 ·

flyouts

1
<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 transition-shadow 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 text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-base-900/5"
        >
          <div>
            <a
              class="flex items-center w-full gap-2 text-sm font-medium text-base-900 group-hover:text-accent-500 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"
                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="tracking-tight text-base font-medium text-base-900">
                Sync across devices
              </h3>
            </a>
            <a
              class="flex items-center w-full gap-2 text-sm font-medium text-base-900 group-hover:text-accent-500 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"
                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="tracking-tight text-base font-medium text-base-900">
                Create custom documents
              </h3>
            </a>
            <a
              class="flex items-center w-full gap-2 text-sm font-medium text-base-900 group-hover:text-accent-500 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"
                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="tracking-tight text-base font-medium text-base-900">
                Edit your files
              </h3>
            </a>
            <a
              class="flex items-center w-full gap-2 text-sm font-medium text-base-900 group-hover:text-accent-500 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"
                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="tracking-tight text-base font-medium text-base-900">
                Edit your files
              </h3>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>