Skip to Content
ComponentsHTML

HTML Components

TailAdmin HTML offers a variety of customizable components designed to enhance the user interface and improve the overall experience of your web application. These components are fully responsive, easy to integrate, and can be tailored to meet your specific design needs.

Usage Instructions

HTML components are created using Tailwind CSS classes and Alpine.js directives. You can use them in your project by copying and pasting the code into your HTML files.

Static Component

If you want to use a static component without any interactivity (Avatar Group in this case), you can just copy and paste the code into your HTML file.

<!-- Existing Code -->
 
<!-- Avatar Group Start -->
<div class="flex items-center justify-center -space-x-2">
  <img
    class="size-10 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
    src="./images/user/user-01.jpg"
    alt="user one"
  />
  <img
    class="size-10 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
    src="./images/user/user-02.jpg"
    alt="user one"
  />
  <img
    class="size-10 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
    src="./images/user/user-03.jpg"
    alt="user one"
  />
  <img
    class="size-10 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
    src="./images/user/user-04.jpg"
    alt="user one"
  />
  <img
    class="size-10 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
    src="./images/user/user-05.jpg"
    alt="user one"
  />
  <div
    class="relative flex size-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-700 ring-2 ring-white dark:bg-[#192130] dark:text-gray-400 dark:ring-gray-800"
  >
    2+
  </div>
</div>
<!-- Avatar Group End -->
 
<!-- Existing Code -->

Interactive Components

Alpine js Reusable Component Factory, Reference-Target Anchor Pattern and other popular patterns have been used for interactive components.

For Example:

<!-- Interactive Dropdown Component -->
<div
  x-data="dropdown({ placement: 'bottom-start', offset: 8 })"
  @click.outside="open = false"
  @keydown.esc.prevent.stop="open = false"
  class="relative inline-block"
>
  <!-- Trigger Button -->
  <button
    x-ref="trigger"
    type="button"
    @click="toggle"
    class="bg-brand-500 shadow-theme-xs hover:bg-brand-600 focus-visible:ring-3 focus-visible:ring-brand-500/20 inline-flex h-11 items-center justify-center gap-2 rounded-[10px] px-5 py-3 text-sm font-medium text-white"
    aria-haspopup="true"
    :aria-expanded="open"
  >
    Account Menu
    <svg
      class="size-5 transition-transform duration-200"
      :class="{ 'rotate-180': open }"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.792 7.396L10 12.604l5.208-5.208"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </button>
 
  <!-- Dropdown Menu (Positioned via Floating UI) -->
  <div
    x-ref="dropdown"
    x-cloak
    x-show="open"
    x-transition:enter="animate-in fade-in-0 zoom-in-95 duration-100"
    x-transition:leave="animate-out fade-out-0 zoom-out-95 fill-mode-forwards duration-75"
    class="min-w-65 shadow-theme-lg fixed z-50 flex flex-col gap-1 rounded-2xl border border-gray-200 bg-white p-3 outline-hidden dark:border-gray-800 dark:bg-[#1E2635]"
  >
    <a
      href="#"
      class="group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
    >
      Edit Profile
    </a>
    <a
      href="#"
      class="group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
    >
      Account Settings
    </a>
    <a
      href="#"
      class="group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
    >
      Support
    </a>
  </div>
</div>
Last updated on
App LayoutReact