Yes, these are free Tailwind Components.

<!-- Page Container -->
<div
  id="page-container"
  class="mx-auto flex min-h-dvh w-full min-w-[320px] flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
>
  <!-- Page Header -->
  <header
    id="page-header"
    class="z-1 flex flex-none items-center bg-white shadow-sm dark:bg-gray-800"
  >
    <div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
      <div class="flex justify-between py-4">
        <!-- Left Section -->
        <div class="flex items-center gap-2 lg:gap-6">
          <!-- Logo -->
          <a
            href="javascript:void(0)"
            class="group inline-flex items-center gap-2 text-lg font-bold tracking-wide text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
          >
            <svg
              class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 transition group-hover:scale-110 dark:text-blue-400"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
                clip-rule="evenodd"
              />
            </svg>
            <span>Company</span>
          </a>
          <!-- END Logo -->

          <!-- Desktop Navigation -->
          <nav class="hidden items-center gap-2 lg:flex">
            <a
              href="javascript:void(0)"
              class="group flex items-center gap-2 rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-600 dark:border-transparent dark:bg-gray-700 dark:text-white"
            >
              <span>Dashboard</span>
            </a>
            <a
              href="javascript:void(0)"
              class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
            >
              <span>Customers</span>
            </a>
            <a
              href="javascript:void(0)"
              class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
            >
              <span>Projects</span>
            </a>
            <a
              href="javascript:void(0)"
              class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
            >
              <span>Sales</span>
            </a>
          </nav>
          <!-- END Desktop Navigation -->
        </div>
        <!-- END Left Section -->

        <!-- Right Section -->
        <div class="flex items-center gap-2">
          <!-- Notifications -->
          <a
            href="javascript:void(0)"
            class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
          >
            <svg
              class="hi-outline hi-bell-alert inline-block size-5"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
              />
            </svg>
          </a>
          <!-- END Notifications -->

          <!-- User Dropdown -->
          <div class="relative inline-block">
            <!-- Dropdown Toggle Button -->
            <button
              type="button"
              id="tk-dropdown-layouts-user"
              class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
              aria-haspopup="true"
              aria-expanded="true"
            >
              <svg
                class="hi-mini hi-user-circle inline-block size-5 sm:hidden"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
                  clip-rule="evenodd"
                />
              </svg>
              <span class="hidden sm:inline">John</span>
              <svg
                class="hi-mini hi-chevron-down hidden size-5 opacity-40 sm:inline-block"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
            <!-- END Dropdown Toggle Button -->

            <!-- Dropdown -->
            <!-- 
              Visibility
                Closed        'hidden'
                Opened        '' (no class)

              Show/Hide with transitions
                enter         'transition ease-out duration-100'
                enter-start   'opacity-0 scale-90'
                enter-end     'opacity-100 scale-100'
                leave         'transition ease-in duration-75'
                leave-start   'opacity-100 scale-100'
                leave-end     'opacity-0 scale-90'
            -->
            <div
              role="menu"
              aria-labelledby="tk-dropdown-layouts-user"
              class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-lg shadow-xl dark:shadow-gray-900"
            >
              <div
                class="divide-y divide-gray-100 rounded-lg bg-white ring-1 ring-black/5 dark:divide-gray-700 dark:bg-gray-800 dark:ring-gray-700"
              >
                <div class="space-y-1 p-2.5">
                  <a
                    role="menuitem"
                    href="javascript:void(0)"
                    class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
                  >
                    <svg
                      class="hi-mini hi-inbox inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M1 11.27c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h9.454a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73zm3.068-5.852A1.25 1.25 0 015.273 4.5h9.454a1.25 1.25 0 011.205.918l1.523 5.52c.006.02.01.041.015.062H14a1 1 0 00-.86.49l-.606 1.02a1 1 0 01-.86.49H8.236a1 1 0 01-.894-.553l-.448-.894A1 1 0 006 11H2.53l.015-.062 1.523-5.52z"
                        clip-rule="evenodd"
                      />
                    </svg>
                    <span class="grow">Inbox</span>
                    <div
                      class="inline-flex rounded-full border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-xs font-semibold leading-4 text-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-blue-50"
                    >
                      2
                    </div>
                  </a>
                  <a
                    role="menuitem"
                    href="javascript:void(0)"
                    class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
                  >
                    <svg
                      class="hi-mini hi-flag inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        d="M3.5 2.75a.75.75 0 00-1.5 0v14.5a.75.75 0 001.5 0v-4.392l1.657-.348a6.449 6.449 0 014.271.572 7.948 7.948 0 005.965.524l2.078-.64A.75.75 0 0018 12.25v-8.5a.75.75 0 00-.904-.734l-2.38.501a7.25 7.25 0 01-4.186-.363l-.502-.2a8.75 8.75 0 00-5.053-.439l-1.475.31V2.75z"
                      />
                    </svg>
                    <span class="grow">Notifications</span>
                    <div
                      class="inline-flex rounded-full border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-xs font-semibold leading-4 text-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-blue-50"
                    >
                      5
                    </div>
                  </a>
                </div>
                <div class="space-y-1 p-2.5">
                  <a
                    role="menuitem"
                    href="javascript:void(0)"
                    class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
                  >
                    <svg
                      class="hi-mini hi-user-circle inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
                        clip-rule="evenodd"
                      />
                    </svg>
                    <span class="grow">Account</span>
                  </a>
                  <a
                    role="menuitem"
                    href="javascript:void(0)"
                    class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
                  >
                    <svg
                      class="hi-mini hi-cog-6-tooth inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
                        clip-rule="evenodd"
                      />
                    </svg>
                    <span class="grow">Settings</span>
                  </a>
                </div>
                <div class="space-y-1 p-2.5">
                  <form onsubmit="return false;">
                    <button
                      type="submit"
                      role="menuitem"
                      class="group flex w-full items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
                    >
                      <svg
                        class="hi-mini hi-lock-closed inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
                          clip-rule="evenodd"
                        />
                      </svg>
                      <span class="grow">Sign out</span>
                    </button>
                  </form>
                </div>
              </div>
            </div>
            <!-- END Dropdown -->
          </div>
          <!-- END User Dropdown -->

          <!-- Toggle Mobile Navigation -->
          <div class="lg:hidden">
            <button
              type="button"
              class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
            >
              <svg
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
                class="hi-solid hi-menu inline-block size-5"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
          </div>
          <!-- END Toggle Mobile Navigation -->
        </div>
        <!-- END Right Section -->
      </div>

      <!-- Mobile Navigation -->
      <!-- 
        Visibility
          Closed        'hidden'
          Opened        '' (no class)
      -->
      <div class="lg:hidden">
        <nav
          class="flex flex-col gap-2 border-t border-gray-200 py-4 dark:border-gray-700"
        >
          <a
            href="javascript:void(0)"
            class="group flex items-center gap-2 rounded-lg border border-blue-50 bg-blue-50 px-3 py-2 text-sm font-semibold text-blue-600 dark:border-transparent dark:bg-gray-700/75 dark:text-white"
          >
            <span>Dashboard</span>
          </a>
          <a
            href="javascript:void(0)"
            class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
          >
            <span>Customers</span>
          </a>
          <a
            href="javascript:void(0)"
            class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
          >
            <span>Projects</span>
          </a>
          <a
            href="javascript:void(0)"
            class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
          >
            <span>Sales</span>
          </a>
        </nav>
      </div>
      <!-- END Mobile Navigation -->
    </div>
  </header>
  <!-- END Page Header -->

  <!-- Page Content -->
  <main id="page-content" class="flex max-w-full flex-auto flex-col">
    <!-- Page Heading -->
    <div class="bg-gray-50 dark:bg-gray-800/50">
      <div class="container mx-auto p-4 lg:p-8 xl:max-w-7xl">
        <div
          class="space-y-2 py-2 text-center sm:flex sm:items-center sm:justify-between sm:space-y-0 sm:text-left lg:py-0"
        >
          <div class="grow">
            <h1 class="mb-1 text-xl font-bold">Dashboard</h1>
            <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">
              Welcome
              <a
                href="javascript:void(0)"
                class="text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
                >John</a
              >, everything seems great!
            </h2>
          </div>
          <div
            class="flex flex-none items-center justify-center gap-2 rounded px-2 py-3 sm:justify-end sm:bg-transparent sm:px-0"
          >
            <a
              href="javascript:void(0)"
              class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-semibold leading-5 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
            >
              <svg
                class="hi-mini hi-plus inline-block size-5 opacity-50"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
                />
              </svg>
              <span>New Project</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- END Page Heading -->

    <!-- Page Section -->
    <div class="container mx-auto p-4 lg:p-8 xl:max-w-7xl">
      <!--

      ADD YOUR MAIN CONTENT BELOW

      -->

      <!-- Placeholder -->
      <div
        class="flex items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 py-64 text-gray-400 dark:border-gray-700 dark:bg-gray-800"
      >
        Content (max width 1280px)
      </div>

      <!--
      
      ADD YOUR MAIN CONTENT ABOVE
            
      -->
    </div>
    <!-- END Page Section -->
  </main>
  <!-- END Page Content -->

  <!-- Page Footer -->
  <footer
    id="page-footer"
    class="flex flex-none items-center bg-white dark:bg-gray-800"
  >
    <div
      class="container mx-auto flex flex-col px-4 text-center text-sm md:flex-row md:justify-between md:text-left lg:px-8 xl:max-w-7xl"
    >
      <div class="pb-1 pt-4 md:pb-4">
        <a
          href="https://tailkit.com"
          class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
          target="_blank"
          >Tailkit</a
        >
        ©
      </div>
      <div class="inline-flex items-center justify-center pb-4 pt-1 md:pt-4">
        <span>Crafted with</span>
        <svg
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
          class="hi-solid hi-heart mx-1 inline-block size-4 text-red-600"
        >
          <path
            fill-rule="evenodd"
            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span>
          by
          <a
            href="https://pixelcave.com"
            class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
            target="_blank"
            >pixelcave</a
          ></span
        >
      </div>
    </div>
  </footer>
  <!-- END Page Footer -->
</div>
<!-- END Page Container -->

<!-- Alerts: Success -->
<div
  class="rounded bg-emerald-100 p-4 text-emerald-700 md:p-5 dark:bg-emerald-900/75 dark:text-emerald-100"
>
  <div class="mb-2 flex items-center">
    <svg
      class="hi-solid hi-check-circle mr-3 inline-block size-5 flex-none text-emerald-500 dark:text-emerald-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clip-rule="evenodd"
      />
    </svg>
    <h3 class="font-semibold">Project was added successfully!</h3>
  </div>
  <p class="ml-8">
    Manage all available projects from your
    <a
      class="text-emerald-600 underline hover:text-emerald-400 dark:text-emerald-400 dark:hover:text-emerald-300"
      href="javascript:void(0)"
      >personal dashboard</a
    >.
  </p>
</div>
<!-- END Alerts: Success -->

<!-- Cards: User -->
<div
  class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
  <!-- Card Cover/Avatar -->
  <div
    class="mb-8 bg-cover"
    style="
      background-image: url(&quot;https://cdn.tailkit.com/media/placeholders/photo-JgOeRuGD_Y4-800x400.jpg&quot;);
    "
  >
    <div class="flex h-32 items-end justify-center">
      <div class="-mb-12 rounded-full bg-gray-200/50 p-2 dark:bg-gray-600/50">
        <img
          src="https://cdn.tailkit.com/media/placeholders/avatar-c_GmwfHBDzk-160x160.jpg"
          alt="User Avatar"
          class="inline-block size-20 rounded-full"
        />
      </div>
    </div>
  </div>
  <!-- END Card Cover/Avatar -->

  <!-- Card Body -->
  <div class="grow p-5 text-center">
    <h3 class="mb-1 mt-3 text-lg font-semibold">Antony Jaramillo</h3>
    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
      Web Developer ∙ 12 Projects
    </p>
  </div>
  <!-- END Card Body -->
</div>
<!-- END Cards: User -->

<!-- Divider: With Heading -->
<h3 class="my-8 flex items-center">
  <span
    aria-hidden="true"
    class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
  ></span>
  <span class="mx-3 text-lg font-medium">Title</span>
  <span
    aria-hidden="true"
    class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
  ></span>
</h3>
<!-- END Divider: With Heading -->

<!-- Dropdowns: Simple -->
<div class="flex justify-end">
  <!-- Dropdown Container -->
  <div class="relative inline-block">
    <!-- Dropdown Toggle Button -->
    <button
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-semibold leading-5 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
      id="tk-dropdown"
      aria-haspopup="true"
      aria-expanded="true"
    >
      <span>John Doe</span>
      <svg
        class="hi-mini hi-chevron-down inline-block size-4 opacity-50"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <!-- END Dropdown Toggle Button -->

    <!-- Dropdown -->
    <!-- 
      Visibility
        Closed        'hidden'
        Opened        '' (no class)

      Show/Hide with transitions
        enter         'transition ease-out duration-100'
        enter-start   'opacity-0 scale-90'
        enter-end     'opacity-100 scale-100'
        leave         'transition ease-in duration-75'
        leave-start   'opacity-100 scale-100'
        leave-end     'opacity-0 scale-90'
    -->
    <div
      role="menu"
      aria-labelledby="tk-dropdown"
      class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-lg shadow-xl dark:shadow-gray-900"
    >
      <div
        class="divide-y divide-gray-100 rounded-lg bg-white ring-1 ring-black/5 dark:divide-gray-700 dark:bg-gray-800 dark:ring-gray-700"
      >
        <div class="space-y-1 p-2.5">
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
          >
            <svg
              class="hi-mini hi-inbox inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M1 11.27c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h9.454a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73zm3.068-5.852A1.25 1.25 0 015.273 4.5h9.454a1.25 1.25 0 011.205.918l1.523 5.52c.006.02.01.041.015.062H14a1 1 0 00-.86.49l-.606 1.02a1 1 0 01-.86.49H8.236a1 1 0 01-.894-.553l-.448-.894A1 1 0 006 11H2.53l.015-.062 1.523-5.52z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Inbox</span>
          </a>
        </div>
        <div class="space-y-1 p-2.5">
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
          >
            <svg
              class="hi-mini hi-user-circle inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Account</span>
          </a>
          <a
            role="menuitem"
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
          >
            <svg
              class="hi-mini hi-cog-6-tooth inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="grow">Settings</span>
          </a>
        </div>
        <div class="space-y-1 p-2.5">
          <form onsubmit="return false;">
            <button
              type="submit"
              role="menuitem"
              class="group flex w-full items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
            >
              <svg
                class="hi-mini hi-lock-closed inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
                  clip-rule="evenodd"
                />
              </svg>
              <span class="grow">Sign out</span>
            </button>
          </form>
        </div>
      </div>
    </div>
    <!-- END Dropdown -->
  </div>
  <!-- Dropdown Container -->
</div>
<!-- END Dropdowns: Simple -->

<!-- Placeholder -->
<div
  class="mt-2 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 py-48 text-gray-400 dark:border-gray-700 dark:bg-gray-900"
>
  Content
</div>

<!-- Form Actions: With Link -->
<form onsubmit="return false;">
  <!-- Card -->
  <div
    class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
  >
    <!-- Card Body -->
    <div
      class="w-full grow space-y-4 border-l-4 border-blue-500 p-5 sm:flex sm:items-center sm:justify-between sm:gap-2 sm:space-y-0"
    >
      <div class="sm:w-1/2">
        <h3 class="mb-1 text-lg font-semibold">Upgrade to the Agency plan</h3>
        <p class="mb-4 text-gray-500 dark:text-gray-400">
          Power up your current plan with only $9,99 per month and receive tons
          of new features including but not limited to:
        </p>
        <ul
          class="list-inside list-disc space-y-2 text-sm text-gray-500 dark:text-gray-400"
        >
          <li>10GB storage</li>
          <li>1TB bandwith</li>
          <li>Exclusive 24/7 email, phone and chat support</li>
        </ul>
      </div>
      <div class="flex-none">
        <a
          href="javascript:void(0)"
          class="inline-flex items-center gap-1 text-sm font-semibold text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
        >
          <svg
            class="hi-mini hi-arrow-up inline-block size-4 opacity-50"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Upgrade your plan</span>
        </a>
      </div>
    </div>
    <!-- END Card Body -->
  </div>
  <!-- END Card -->
</form>
<!-- END Form Actions: With Link -->

<!-- Form Elements: Inputs -->
<form class="space-y-6 dark:text-gray-100" onsubmit="return false;">
  <!-- Text Input -->
  <div class="space-y-1">
    <label for="firstname" class="font-medium">Name</label>
    <input
      type="text"
      id="firstname"
      name="firstname"
      placeholder="Enter your name"
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
    />
  </div>
  <!-- END Text Input -->

  <!-- Email Input -->
  <div class="space-y-1">
    <label for="email" class="font-medium">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="Enter your email"
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
    />
  </div>
  <!-- END Email Input -->

  <!-- Password Input -->
  <div class="space-y-1">
    <label for="password" class="font-medium">Password</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="Enter your password"
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
    />
  </div>
  <!-- END Password Input -->
</form>
<!-- END Form Elements: Inputs -->

<!-- Form Layouts: Inline -->
<form
  class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2 dark:text-gray-100"
  onsubmit="return false;"
>
  <div>
    <label for="email" class="sr-only">Email</label>
    <input
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
      type="email"
      id="email"
      name="email"
      placeholder="Email"
    />
  </div>
  <div>
    <label for="password" class="sr-only">Password</label>
    <input
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
      type="password"
      id="password"
      name="password"
      placeholder="Password"
    />
  </div>
  <button
    type="submit"
    class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-4 py-2 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
  >
    Login
  </button>
</form>
<!-- END Form Layouts: Inline -->

<!-- Form Layouts: Labels On Top -->
<form class="space-y-6 dark:text-gray-100" onsubmit="return false;">
  <div class="space-y-1">
    <label for="email" class="font-medium">Email</label>
    <input
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
      type="email"
      id="email"
      name="email"
      placeholder="Enter your email.."
    />
  </div>
  <div class="space-y-1">
    <label for="password" class="font-medium">Password</label>
    <input
      class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
      type="password"
      id="password"
      name="password"
      placeholder="Enter your password.."
    />
  </div>
  <button
    type="submit"
    class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-semibold leading-5 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
  >
    Login
  </button>
</form>
<!-- END Form Layouts: Labels On Top -->

<!-- List Groups: With Text -->
<ul
  class="divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
>
  <li class="flex items-center justify-between p-4">
    <span class="mr-1 text-sm font-semibold">Website</span>
    <span class="text-sm font-medium text-emerald-500">Operational</span>
  </li>
  <li class="flex items-center justify-between p-4">
    <span class="mr-1 text-sm font-semibold">Desktop Application</span>
    <span class="text-sm font-medium text-emerald-500">Operational</span>
  </li>
  <li class="flex items-center justify-between p-4">
    <span class="mr-1 text-sm font-semibold">Mobile Application</span>
    <span class="text-sm font-medium text-emerald-500">Operational</span>
  </li>
  <li class="flex items-center justify-between p-4">
    <span class="mr-1 text-sm font-semibold">API</span>
    <span class="text-sm font-medium text-emerald-500">Operational</span>
  </li>
  <li class="flex items-center justify-between p-4">
    <span class="mr-1 text-sm font-semibold">Documentation</span>
    <span class="text-sm font-medium text-emerald-500">Operational</span>
  </li>
</ul>
<!-- END List Groups: With Text -->

<!-- Media Objects: Comment -->
<div
  class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
  <div class="grow p-5">
    <div class="flex gap-4">
      <!-- Avatar -->
      <img
        class="mt-1 inline-block size-8 flex-none rounded-full sm:size-12"
        src="https://cdn.tailkit.com/media/placeholders/avatar-mEZ3PoFGs_k-160x160.jpg"
        alt="User Avatar"
      />

      <!-- Content -->
      <div class="grow text-sm">
        <p class="mb-1">
          <a
            href="javascript:void(0)"
            class="font-semibold text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
            >Lori Grant</a
          >
          I just started a new Tailwind CSS based project and I find it very
          refreshing. Could you suggest any tools to help me out?
        </p>
        <p class="space-x-2">
          <a
            href="javascript:void(0)"
            class="font-medium text-gray-500 hover:text-gray-400"
          >
            Like
          </a>
          <a
            href="javascript:void(0)"
            class="font-medium text-gray-500 hover:text-gray-400"
          >
            Reply
          </a>
        </p>
      </div>
      <!-- END Content -->
    </div>
  </div>
</div>
<!-- END Media Objects: Comment -->

<!-- Page Headings: With Icon -->
<h2
  class="mb-4 flex flex-col border-b-2 border-gray-200 py-2 text-2xl font-bold sm:flex-row sm:items-end sm:gap-2 lg:mb-8 dark:border-gray-700"
>
  <span class="inline-flex items-center gap-2">
    <svg
      class="hi-outline hi-presentation-chart-line inline-block size-6 opacity-50"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      aria-hidden="true"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"
      />
    </svg>
    <span>Analytics</span>
  </span>
  <span class="text-lg font-medium text-gray-600 dark:text-gray-400"
    >Welcome back!</span
  >
</h2>
<!-- END Page Headings: With Icon -->

<!-- Placeholder -->
<div
  class="flex items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 py-32 text-gray-400 dark:border-gray-700 dark:bg-gray-800"
>
  Content
</div>

<!-- Pagination: Simple -->
<div class="text-center dark:text-gray-100">
  <!-- Visible on mobile -->
  <nav class="flex sm:hidden">
    <a
      href="javascript:void(0)"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      <svg
        class="hi-mini hi-chevron-left -mx-1.5 inline-block size-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
    <div class="flex grow items-center justify-center px-2 sm:px-4">
      <span
        >Page <span class="font-semibold">2</span> of
        <span class="font-semibold">20</span></span
      >
    </div>
    <a
      href="javascript:void(0)"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      <svg
        class="hi-mini hi-chevron-right -mx-1.5 inline-block size-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </nav>
  <!-- END Visible on mobile -->

  <!-- Visible on desktop -->
  <nav class="hidden sm:inline-flex">
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 rounded-l-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      <svg
        class="hi-mini hi-chevron-left -mx-1.5 inline-block size-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      1
    </a>
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-gray-100 px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-700/75 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      2
    </a>
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      3
    </a>
    <div
      class="-mr-px flex items-center justify-center border border-gray-200 bg-white px-4 text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
    >
      ...
    </div>
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      19
    </a>
    <a
      href="javascript:void(0)"
      class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      20
    </a>
    <a
      href="javascript:void(0)"
      class="inline-flex items-center justify-center gap-2 rounded-r-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
    >
      <svg
        class="hi-mini hi-chevron-right -mx-1.5 inline-block size-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </nav>
  <!-- END Visible on desktop -->
</div>
<!-- END Pagination: Simple -->

<!-- Statistics: Simple with Action -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-8">
  <!-- Card -->
  <div
    class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
  >
    <!-- Body -->
    <div class="flex grow items-center justify-between p-5">
      <dl class="space-y-1">
        <dt class="text-2xl font-bold">146</dt>
        <dd
          class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
        >
          Sales
        </dd>
      </dl>
      <div
        class="inline-flex items-center gap-1 rounded-full bg-emerald-200 px-2 py-1 text-sm font-semibold leading-4 text-emerald-800"
      >
        <svg
          class="hi-solid hi-arrow-circle-up inline-block size-4"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
            clip-rule="evenodd"
          />
        </svg>
        <span>7.9%</span>
      </div>
    </div>
    <!-- END Body -->

    <!-- Action Link -->
    <a
      href="javascript:void(0)"
      class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
    >
      View All Sales
    </a>
    <!-- END Action Link -->
  </div>
  <!-- END Card -->

  <!-- Card -->
  <div
    class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
  >
    <!-- Body -->
    <div class="flex grow items-center justify-between p-5">
      <dl class="space-y-1">
        <dt class="text-2xl font-bold">$5,128</dt>
        <dd
          class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
        >
          Earnings
        </dd>
      </dl>
      <div
        class="inline-flex items-center gap-1 rounded-full bg-rose-200 px-2 py-1 text-sm font-semibold leading-4 text-rose-800"
      >
        <svg
          class="hi-solid hi-arrow-circle-down inline-block size-4"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
            clip-rule="evenodd"
          />
        </svg>
        <span>6.9%</span>
      </div>
    </div>
    <!-- END Body -->

    <!-- Action Link -->
    <a
      href="javascript:void(0)"
      class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
    >
      View all Earnings
    </a>
    <!-- END Action Link -->
  </div>
  <!-- END Card -->

  <!-- Card -->
  <div
    class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
  >
    <!-- Body -->
    <div class="flex grow items-center justify-between p-5">
      <dl class="space-y-1">
        <dt class="text-2xl font-bold">$2,670</dt>
        <dd
          class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
        >
          Wallet
        </dd>
      </dl>
      <div
        class="inline-flex items-center gap-1 rounded-full bg-emerald-200 px-2 py-1 text-sm font-semibold leading-4 text-emerald-800"
      >
        <svg
          class="hi-solid hi-arrow-circle-up inline-block size-4"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
            clip-rule="evenodd"
          />
        </svg>
        <span>5.6%</span>
      </div>
    </div>
    <!-- END Body -->

    <!-- Action Link -->
    <a
      href="javascript:void(0)"
      class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
    >
      Check your Balance
    </a>
    <!-- END Action Link -->
  </div>
  <!-- END Card -->
</div>
<!-- END Statistics: Simple with Action -->

<!-- Pages: Sign In: Boxed -->
<!-- Page Container -->
<div
  id="page-container"
  class="mx-auto flex min-h-dvh w-full min-w-[320px] flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
>
  <!-- Page Content -->
  <main id="page-content" class="flex max-w-full flex-auto flex-col">
    <div
      class="relative mx-auto flex min-h-dvh w-full max-w-10xl items-center justify-center overflow-hidden p-4 lg:p-8"
    >
      <!-- Sign In Section -->
      <section class="w-full max-w-xl py-6">
        <!-- Header -->
        <header class="mb-10 text-center">
          <h1 class="mb-2 inline-flex items-center gap-2 text-2xl font-bold">
            <svg
              class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 dark:text-blue-500"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
                clip-rule="evenodd"
              />
            </svg>
            <span>Company</span>
          </h1>
          <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">
            Welcome, please sign in to your dashboard
          </h2>
        </header>
        <!-- END Header -->

        <!-- Sign In Form -->
        <div
          class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
        >
          <div class="grow p-5 md:px-16 md:py-12">
            <form class="space-y-6" onsubmit="return false;">
              <div class="space-y-1">
                <label for="email" class="text-sm font-medium">Email</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="Enter your email"
                  class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
                />
              </div>
              <div class="space-y-1">
                <label for="password" class="text-sm font-medium"
                  >Password</label
                >
                <input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="Enter your password"
                  class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
                />
              </div>
              <div>
                <div class="mb-5 flex items-center justify-between gap-2">
                  <label class="flex items-center">
                    <input
                      type="checkbox"
                      id="remember_me"
                      name="remember_me"
                      class="size-4 rounded border border-gray-200 text-blue-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:checked:border-transparent dark:checked:bg-blue-500 dark:focus:border-blue-500"
                    />
                    <span class="ml-2 text-sm">Remember me</span>
                  </label>
                  <a
                    href="javascript:void(0)"
                    class="inline-block text-sm font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
                    >Forgot Password?</a
                  >
                </div>
                <button
                  type="submit"
                  class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-6 py-3 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
                >
                  <svg
                    class="hi-mini hi-arrow-uturn-right inline-block size-5 opacity-50"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M12.207 2.232a.75.75 0 00.025 1.06l4.146 3.958H6.375a5.375 5.375 0 000 10.75H9.25a.75.75 0 000-1.5H6.375a3.875 3.875 0 010-7.75h10.003l-4.146 3.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.06.025z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  <span>Sign In</span>
                </button>

                <!-- Divider: With Label -->
                <div class="my-5 flex items-center">
                  <span
                    aria-hidden="true"
                    class="h-0.5 grow rounded bg-gray-100 dark:bg-gray-700/75"
                  ></span>
                  <span
                    class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200"
                    >or sign in with</span
                  >
                  <span
                    aria-hidden="true"
                    class="h-0.5 grow rounded bg-gray-100 dark:bg-gray-700/75"
                  ></span>
                </div>
                <!-- END Divider: With Label -->

                <div class="grid grid-cols-2 gap-2">
                  <button
                    type="button"
                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
                  >
                    <svg
                      class="bi bi-facebook inline-block size-4 text-[#1877f2]"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="currentColor"
                      viewBox="0 0 16 16"
                      aria-hidden="true"
                    >
                      <path
                        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
                      />
                    </svg>
                    <span>Facebook</span>
                  </button>
                  <button
                    type="button"
                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
                  >
                    <svg
                      class="bi bi-twitter-x inline-block size-4"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="currentColor"
                      viewBox="0 0 16 16"
                      aria-hidden="true"
                    >
                      <path
                        d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"
                      />
                    </svg>
                    <span class="sr-only">X</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
          <div
            class="grow bg-gray-50 p-5 text-center text-sm md:px-16 dark:bg-gray-700/50"
          >
            Don’t have an account yet?
            <a
              href="javascript:void(0)"
              class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
              >Sign up</a
            >
          </div>
        </div>
        <!-- END Sign In Form -->

        <!-- Footer -->
        <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
          Powered by
          <a
            href="javascript:void(0)"
            class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
            >Tailkit</a
          >
        </div>
        <!-- END Footer -->
      </section>
      <!-- END Sign In Section -->
    </div>
  </main>
  <!-- END Page Content -->
</div>
<!-- END Page Container -->
<!-- END Pages: Sign In: Boxed -->

<!-- Hero Section: Centered with Simple Header -->
<div
  class="relative overflow-hidden bg-white dark:bg-gray-900 dark:text-gray-100"
>
  <!-- Main Header -->
  <header id="page-header" class="relative flex flex-none items-center py-8">
    <!-- Main Header Content -->
    <div
      class="container mx-auto flex flex-col gap-4 px-4 text-center sm:flex-row sm:items-center sm:justify-between sm:gap-0 lg:px-8 xl:max-w-7xl"
    >
      <div>
        <a
          href="javascript:void(0)"
          class="group inline-flex items-center gap-2 text-lg font-bold tracking-wide text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
        >
          <svg
            class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 transition group-hover:scale-110 dark:text-blue-400"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Company</span>
        </a>
      </div>
      <nav class="space-x-3 md:space-x-6">
        <a
          href="javascript:void(0)"
          class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
        >
          <span>Features</span>
        </a>
        <a
          href="javascript:void(0)"
          class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
        >
          <span>Pricing</span>
        </a>
        <a
          href="javascript:void(0)"
          class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
        >
          <span>Support</span>
        </a>
      </nav>
    </div>
    <!-- END Main Header Content -->
  </header>
  <!-- END Main Header -->

  <!-- Hero Content -->
  <div
    class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
  >
    <div class="text-center">
      <div
        class="mb-2 inline-flex rounded border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium leading-4 text-gray-800 dark:border-gray-600/50 dark:bg-gray-700/50 dark:text-gray-200"
      >
        v6.0 Latest Version
      </div>
      <h1 class="mb-4 text-4xl font-black text-black dark:text-white">
        Next generation
        <span class="text-blue-600 dark:text-blue-500">website builder</span>
      </h1>
      <h2
        class="mx-auto text-xl font-medium leading-relaxed text-gray-700 lg:w-2/3 dark:text-gray-300"
      >
        Super fast and easy to use software to power your next idea or build
        your client’s web projects. Get it today and profit.
      </h2>
    </div>
    <div
      class="flex flex-col gap-2 pb-28 pt-10 sm:flex-row sm:items-center sm:justify-center"
    >
      <a
        href="javascript:void(0)"
        class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-7 py-3.5 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
      >
        <svg
          class="hi-mini hi-arrow-down-tray inline-block size-5 opacity-75"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
          />
          <path
            d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
          />
        </svg>
        <span>Download for free</span>
      </a>
      <a
        href="javascript:void(0)"
        class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-7 py-3.5 font-semibold leading-6 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-transparent dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
      >
        <span>Learn more</span>
      </a>
    </div>
    <div class="relative mx-5 lg:mx-32">
      <div
        class="bg-tranparent absolute left-0 top-0 -ml-20 -mt-16 size-40 rounded-full border border-blue-200 lg:size-72 dark:border-blue-900"
      ></div>
      <div
        class="bg-tranparent absolute left-0 top-0 -ml-14 -mt-20 size-40 rounded-full border border-blue-100 lg:size-72 dark:border-blue-950"
      ></div>
      <div
        class="bg-tranparent absolute bottom-0 right-0 -mb-16 -mr-20 size-40 rounded-full border border-blue-200 lg:size-72 dark:border-blue-900"
      ></div>
      <div
        class="bg-tranparent absolute bottom-0 right-0 -mb-20 -mr-14 size-40 rounded-full border border-blue-100 lg:size-72 dark:border-blue-950"
      ></div>
      <div
        class="absolute inset-0 -m-6 -rotate-2 rounded-xl bg-blue-100 lg:-m-8 dark:bg-gray-800"
      ></div>
      <div
        class="absolute inset-0 -m-6 rotate-1 rounded-xl bg-blue-800/75 shadow-inner lg:-m-8 dark:bg-blue-900/75"
      ></div>
      <img
        src="https://cdn.tailkit.com/media/placeholders/photo-1SAnrIxw5OY-1280x800.jpg"
        class="relative mx-auto rounded-lg shadow-lg"
        alt="Hero Image"
      />
    </div>
  </div>
  <!-- END Hero Content -->
</div>
<!-- END Hero Section: Centered with Simple Header -->

<!-- Page Header Section: Simple -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
  <div
    class="container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
  >
    <div class="text-center">
      <div
        class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
      >
        Documentation
      </div>
      <h2 class="mb-4 text-4xl font-black text-black dark:text-white">
        Getting Started with Tailkit
      </h2>
      <h3
        class="mx-auto text-xl font-medium leading-relaxed text-gray-700 lg:w-2/3 dark:text-gray-300"
      >
        Get to know how it can help you build the User Interface of your website
        and web application with the minimal effort.
      </h3>
    </div>
  </div>
</div>
<!-- END Page Header Section: Simple -->

<!-- About Section: Company with Stats -->
<div class="dark:bg-gray-900 dark:text-gray-100">
  <!-- Heading -->
  <div
    class="bg-cover"
    style="
      background-image: url(&quot;https://cdn.tailkit.com/media/placeholders/photo-Oalh2MojUuk-1280x800.jpg&quot;);
    "
  >
    <div class="bg-blue-900/95">
      <div
        class="container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
      >
        <div class="text-center">
          <svg
            class="hi-solid hi-code-bracket-square mb-5 inline-block size-16 text-blue-300/50"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm14.25 6a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm-10.28-.53a.75.75 0 000 1.06l2.25 2.25a.75.75 0 101.06-1.06L8.56 12l1.72-1.72a.75.75 0 10-1.06-1.06l-2.25 2.25z"
              clip-rule="evenodd"
            />
          </svg>
          <h2 class="mb-4 text-4xl font-black text-white">We are TechCode</h2>
          <h3
            class="mx-auto text-xl font-medium leading-relaxed text-gray-200 lg:w-2/3"
          >
            A passionate team who are here to help you code and build your
            business using powerful tools.
          </h3>
        </div>
      </div>
    </div>
  </div>
  <!-- END Heading -->

  <!-- Stats -->
  <div class="container mx-auto px-4 py-12 lg:px-8 lg:py-24 xl:max-w-7xl">
    <div
      class="grid grid-cols-1 divide-y text-center sm:grid-cols-3 sm:divide-x sm:divide-y-0 dark:divide-gray-700/75"
    >
      <dl class="space-y-2 p-5">
        <dt class="text-4xl font-black">83,589</dt>
        <dd class="font-medium text-gray-600 dark:text-gray-400">Customers</dd>
      </dl>
      <dl class="space-y-2 p-5">
        <dt class="text-4xl font-black">17,594</dt>
        <dd class="font-medium text-gray-600 dark:text-gray-400">Web Apps</dd>
      </dl>
      <dl class="space-y-2 p-5">
        <dt class="text-4xl font-black">96,188</dt>
        <dd class="font-medium text-gray-600 dark:text-gray-400">Projects</dd>
      </dl>
    </div>
  </div>
  <!-- END Stats -->
</div>
<!-- END About Section: Company with Stats -->

<!-- CTA Section: Simple With Illustration -->
<div class="bg-white dark:bg-gray-800 dark:text-gray-100">
  <div
    class="container mx-auto grid grid-cols-1 gap-12 px-4 py-16 lg:grid-cols-2 lg:px-8 lg:py-32 xl:max-w-7xl"
  >
    <div class="flex items-center text-center lg:text-left">
      <div class="space-y-8">
        <!-- Heading -->
        <div>
          <div
            class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
          >
            Get Started
          </div>
          <h2 class="mb-4 text-4xl font-black text-black dark:text-white">
            Grow your business
            <span class="text-blue-600 dark:text-blue-500">now</span>!
          </h2>
          <h3
            class="text-xl font-medium leading-relaxed text-gray-700 dark:text-gray-300"
          >
            Inspiring results from day one without the pain. Get your own custom
            dashboard and start building amazing services.
          </h3>
        </div>
        <!-- END Heading -->

        <!-- Action -->
        <div>
          <a
            href="javascript:void(0)"
            class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-6 py-3 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
          >
            <svg
              class="hi-mini hi-plus-circle inline-block size-5 opacity-50"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
                clip-rule="evenodd"
              />
            </svg>
            <span>Create your Account